title: Applying vertical-align to two divs using inline-block
body: <p>So I have some DIVs.
  The structure is this</p>
  
  <pre><code>    &lt;div id="content"&gt;
          &lt;div id="lcol"&gt;some content&lt;/div&gt;
          &lt;div id="lcol"&gt;some&lt;br /&gt;content&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And my problem is that the two divs are of different height. I'm using <code>display:inline-block</code> for 'lcol' while 'content' is just a regular div. The two lcol divs do indeed show up side by side, but they are anchored at the bottom of the div. I would like them to be aligned to the top of the div. I tried adding <code>vertical-align:top</code> to 'content' but nothing happened.</p>
  
  <p>Any ideas?</p>
  
  <p>JsFiddle: <a href="http://jsfiddle.net/qxe8h/1/" rel="noreferrer">http://jsfiddle.net/qxe8h/1/</a></p>