要素を横並びにするときに、今だとdisplay:flexが主流かなと思います。
でも、他にも要素を横並びにする方法はあって、その1つにinline-blockを使って横並びにする方法があります。
でも、inline-blockを使って横並びにすると1つぶつかる問題があって、それが高さがずれる問題です。
こちらみてみてください！
このように、高さがずれてしまうんですよね。
これの原因がinline-blockのvertical-alignの初期値がbase-lineだからです。
http://www.htmq.com/style/vertical-align.shtml
なので、高さを調節するためには、vertical-align: top;を指定すると高さがそろってくれます。
See the Pen inline-block by TakahiroOkada (@okalog) on CodePen.
