Why my inline-block divs are not aligned when only one of them has text? [duplicate]

Question

Live page here.

Given this HTML page:

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;  }

<section role="main">    <article>Java</article>    <article></article>  </section>    <section role="main">    <article>Java</article>    <article>JavaScript</article>  </section>

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 <article> elements are center aligned:

Any ideas what is causing this behavior and how can it be fixed?

Answer 1

Adding:

vertical-align: bottom; 

To your second rule should make it work. Apparently, inline-blocks with no text are rendered as inline-images or something else, and the vertical-align of these elements are incorrect, so forcing them to be aligned to bottom fixes the issue.

Source: inline-block element with no text renders differently