Floating div to go below partner

Question

Consider the following HTML structure,

<div class='floated' id='div1'></div>
<div class='floated' id='div2'></div>
<div class='floated' id='div3'></div>

with the following CSS:

.floated {
  width: 50%;
  float: left;
}

#div1 {
  height: 300px;
  background-color:red;
}

#div2 {
  height: 30px;
  background-color: green;  
}

#div3 {
  height: 30px;
  background-color: yellow; 
}

This way, #div1 will take up a 300px tall part of the left side of the page, while #div2 and #div3 will get floated to the right side of the page. How could I set up my CSS, so #div1 and #div2 takes up a single row(of height 300px, the maximum height of the two), and #div3 will be placed right below #div1?

I am not controling the height of these divs, this is dynamic, it is possible that sometimes the first one will be only 20 pixels, and the second one will be 1000 pixels, and the other way around is also a possibility

Here's a fiddle: https://jsfiddle.net/1u55fukj/

Answer 1

You can use Flexbox on parent element (body in this case) and use flex-wrap: wrap. This will always make both div's in same row equal height or equal to height of taller one DEMO

body {
  display: flex;
  flex-wrap: wrap;
}
.floated {
  flex: 0 0 50%;
}
#div1 {
  height: 300px;
  background-color: red;
}
#div2 {
  background-color: green;
}
#div3 {
  height: 30px;
  background-color: yellow;
}

<div class='floated' id='div1'></div>
<div class='floated' id='div2'></div>
<div class='floated' id='div3'></div>