Make divs on same row the same height - Dynamic Content

Question

I am working on an application that generates dynamic content and displays them on floating divs. Each div takes 49% width of the page. The problem I'm running into is that the height of the divs vary depending on the content.

What I'm looking to do is make the divs on the same row the same height. Any suggestions?

.item {
    background: #c4c4c4;
    width: 49%;
    border: 1px solid black;
    float: left;
}

<div id="container">
    <div class="item">
        Test
    </div>
    <div class="item">
        Hello.
        Sample <br>
        Content <br>
    </div>
    <div class="item">
        Test<br>
        Sample Content
    </div>
    <div class="item">
        Test
    </div>
</div>

Answer 1

Using CSS3 flexbox to make the #container adapt flexible box layout.

Default value of flex-wrap is nowrap so it aligns in a single row. Use flex-wrap: wrap to create multiple rows based on item's width.

Current browser support for Flexbox is pretty good: Can I use Flexbox?

#container {
  display: flex;
  flex-wrap: wrap; /* Wrap after the items fill the row */
  
  /* Safari specific rules */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
}
.item {
  background: #c4c4c4;
  border: 1px solid black;
  width: 49%;
}

<div id="container">
  <div class="item">
    Test
  </div>
  <div class="item">
    Hello. Sample
    <br>Content
    <br>
  </div>
  <div class="item">
    Test
    <br>Sample Content
  </div>
  <div class="item">
    Test
  </div>
</div>