title: <div> take up all height of parent
body: <p>I have two side-by-side <code>&lt;div&gt;</code> blocks that are both contained in a larger <code>&lt;div&gt;</code> block. I'd like the smaller of the two child <code>&lt;div&gt;</code> blocks to take up all remaining vertical space of the parent block, without actually knowing the height of the parent.</p>
  
  <p>Is this possible to do without any Javascript?</p>
  
  <p>In this example: <a href="http://jsfiddle.net/5J8Em/2/" rel="nofollow">http://jsfiddle.net/5J8Em/2/</a> I'd like the red <code>&lt;div&gt;</code> to be just as tall as the blue one.</p>