title: Align inline-block DIVs to top of container element
body: <p>When two <code>inline-block</code> <code>div</code>s have different heights, why does the shorter of the two not align to the top of the container? (<a href="http://jsfiddle.net/RHM5L/7/" rel="noreferrer"><strong>DEMO</strong></a>):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container { 
      border: 1px black solid;
      width: 320px;
      height: 120px;    
  }
  
  .small {
      display: inline-block;
      width: 40%;
      height: 30%;
      border: 1px black solid;
      background: aliceblue;    
  }
  
  .big {
      display: inline-block;
      border: 1px black solid;
      width: 40%;
      height: 50%;
      background: beige;    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="small"&gt;&lt;/div&gt;
      &lt;div class="big"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I align the small <code>div</code> at the top of its container?</p>