Question

I am trying to use display:table, table-row to get a final output as below. The blue box should be resizable and the red box should have fixed height.

To start a jsbin is here.

I am looking for a css solution. Thanks.

Answer 1

It’s work with display:table . Write like this:

#wrapper {height:250px; width:200px; border:3px solid gray; display:table;}
  #one {height:100px; background-color:red;display: table-row;}
  #two {background-color:blue;display: table-row;}

Check this http://jsfiddle.net/jYvK2/