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

Question

I bring here a drama with css height.

I would like to make a layout, a div that contains 2 divs both in same line, one is resizable and the other must fit in the parent's height (same height as the first one).

The first div can have additional information (so i can't fix the height), so it will have more lines, the important is that it must not have a scroll bar. The second div must obey the first height, if it's bigger than it will have a scroll bar.

<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 can't figure out how to make it just using css. Or even it's possible just with css. I would not like to use js.

Someone please help me!

Answer 1

Fiddle

What you do is make the right one absolutely positioned which stops its height influencing the parent's.

RELEVANT 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;
}