CSSで高さの違う横並び要素を上揃えで配置する方法

「display:inline-block」を使って横並びにした要素の高さが違うと、思った配置にならない時が結構ある。
そんな時に使うCSSのご紹介です。
高さの違うコンテンツに下の「vertical-align」を指定すれば上揃えや下揃えや中央揃えができる。
ボタンで「vertical-align」有りと無しを切り替えられるので、良かったらポチポチしてみてください。

  .demo1 {
    vertical-align: top;
  }

DEMO