[css] Stretch child div height to fill parent that has dynamic height

The solution is to use display: table-cell to bring those elements inline instead of using display: inline-block or float: left.

_x000D_
_x000D_
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_
_x000D_
_x000D_

Working Fiddle