Make two divs side by side, one resizes and the other has the same height

Question

I bring here drama with css height.

I would like to make a layout, a div that contains 2 divs in one row, one resizes and the other has to match the parent height (same height as the first).

The first div may have additional information (therefore, I cannot fix the height ), so it will have more lines, it is important that it does not have a scrollbar. The second div must obey the first height if it is larger than it will have a scrollbar.

<div class='container'> <!-- parent --> <div class='left'> <!-- resizable --> </div> <div class='right'> <!-- same height as left div --> </div> </div> 

UNSOLVED CODE

The problem is that I cannot figure out how to do this simply using css. Or even this is only possible with css. I would not like to use js.

Someone please help me!

Answer 1

Fiddle

What you do is make the right absolutely positioned , which stops its height, affecting the parent.

RELATED CSS

 .container { background-color: gray; display: table; width: 70%; position:relative; } .container .left{ background-color: tomato; width: 35%; } .container .right{ position:absolute; top:0px; left:35%; background-color: orange; width: 65%; height:100%; overflow-y: auto; }