title: Why my inline-block divs are not aligned when only one of them has text?
body: <blockquote>
    <p><em>Live page <a href="http://jsbin.com/oqodol/1/edit" rel="noreferrer">here</a>.</em></p>
  </blockquote>
  
  <p>Given this HTML page:</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>section[role=main] {
    margin: 1em;
    width: 95%;
    border: 1px solid #999;
  }
  
  section[role=main] article {
    width: 40%;
    height: 180px;
    margin: 1em;
    display: inline-block;
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section role="main"&gt;
    &lt;article&gt;Java&lt;/article&gt;
    &lt;article&gt;&lt;/article&gt;
  &lt;/section&gt;
  
  &lt;section role="main"&gt;
    &lt;article&gt;Java&lt;/article&gt;
    &lt;article&gt;JavaScript&lt;/article&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect both of my articles to be aligned, but as it can be seen in the screenshot below, only when both of my articles have text the <code>&lt;article&gt;</code> elements are center aligned:</p>
  
  <p><img src="https://i.stack.imgur.com/JLlR5.png" alt="alignment issue"></p>
  
  <p>Any ideas what is causing this behavior and how can it be fixed?</p>