How can I make two elements in a row share the same height without a fixed height on the row?

Question

Codepen to demonstrate what I'm talking about:

Is there a way to make the second column (red background) always be the same height as the first column?

Making the height 100% doesn't work because I never set a fixed height, so I'm not sure how else to do it. I could use Javascript/jQuery to set them equal to each other and to continually update it whenever the page is resized, but I'd like to do it without JS if possible.

Any tips?

Here is the code from the Codepen:

.container {
  width: 800px;
  margin: 0 auto;
  background-color: #EEE;
}
div {
  display: inline-block;
}
.col1 {
  width: 50%;
}
.col2 {
  background-color: tomato;
  width: 50%;
  text-align: center;
  vertical-align: top;
}

<div class="container">
  <div class="col1">
    <img src="http://placecage.com/400/400">
  </div>
  <div class="col2">
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>
</div>

http://stackoverflow.com/questions/12716525/sibling-divs-match-height-in-container — isick, Dec 09 '15 at 20:08
Cool, I'll try out `display: table-row;`. I would absolutely love to use Flexbox, but damn browser compatibility is holding me back. Thanks though. — ClaytonAlanKinder, Dec 09 '15 at 20:20

How can I make two elements in a row share the same height without a fixed height on the row?

0 Answers0