title: HTML/CSS: Making two floating divs the same height
body: <p>I have a little peculiar problem that I currently solve using a <code>table</code>, see below.  Basically, I want to have two divs take up 100% of the available width, but only take up as much vertical space as needed (which isn't really that obvious from the picture).  The two should at all times have the exact same height with a little line between them, as shown.</p>
  
  <p><a href="https://i.stack.imgur.com/kNr6b.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kNr6b.png" alt="alt text"></a><br>
  <sub>(source: <a href="http://pici.se/pictures/qJRMtoLPv.png" rel="noreferrer">pici.se</a>)</sub>  </p>
  
  <p>This is all very easy to do using <code>table</code>, which I'm currently doing. However, I'm not too keen on the solution, as semantically this is not actually a table.</p>