title: Boxes inline-block not aligned
body: <p>I am trying to put two boxes (div) side to side, and I noticed they get misaligned when one contains text and the other is empty (in my case it contains )</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td align="center"&gt;
              &lt;div id="tab2"&gt;1&lt;/div&gt;
              &lt;div id="tab3"&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>#tab2, #tab3 {
      width: 460px;
      min-height: 300px;
      display: inline-block;
      border: #BCC6CC 2px solid;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/qbNBqL?editors=110" rel="nofollow">Codepen link</a> </p>