The solution is to use display: table-cell
to bring those elements inline instead of using display: inline-block
or float: left
.
div#container {_x000D_
padding: 20px;_x000D_
background: #F1F1F1_x000D_
}_x000D_
.content {_x000D_
width: 150px;_x000D_
background: #ddd;_x000D_
padding: 10px;_x000D_
display: table-cell;_x000D_
vertical-align: top;_x000D_
}_x000D_
.text {_x000D_
font-family: 12px Tahoma, Geneva, sans-serif;_x000D_
color: #555;_x000D_
}
_x000D_
<div id="container">_x000D_
<div class="content">_x000D_
<h1>Title 1</h1>_x000D_
_x000D_
<div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text._x000D_
<br>Sample Text. Sample Text. Sample Text._x000D_
<br>Sample Text._x000D_
<br>_x000D_
</div>_x000D_
</div>_x000D_
<div class="content">_x000D_
<h1>Title 2</h1>_x000D_
_x000D_
<div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>_x000D_
</div>_x000D_
</div>
_x000D_