title: How to set base line of inline-block element equal to the base line of its last child
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;div class="horizontal"&gt;
    &lt;div&gt;A&lt;/div&gt;
    &lt;div&gt;B&lt;/div&gt;  
  
    &lt;div class="vertical"&gt;
      &lt;div&gt;X&lt;/div&gt;
      &lt;div&gt;Y&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>.horizontal &gt; div {
      display : inline-block;
  }
  
  .vertical &gt; div {
      display : block;
  }
  </code></pre>
  
  <p>Currently I have</p>
  
  <pre><code>    X
  A B Y
  </code></pre>
  
  <p>But I want to have</p>
  
  <pre><code>A B X
      Y  
  </code></pre>
  
  <p>I tried setting vertical-align: text-top, but it doesn't align in exact way, there are a couple of pixels missing which looks really ugly.</p>
  
  <p>P.S. I have jsfiddle for this: <a href="http://jsfiddle.net/Lr8W4/10/" rel="nofollow">http://jsfiddle.net/Lr8W4/10/</a>  </p>