css的inline-block布局方式对齐问题

今天在实现百度前端技术学院的如下案例时遇到了div上下对齐问题。
针对如下左右两栏布局，本来使用将两栏各自div的display设置为inline-block方式来实现，为了左边高度与右边对齐，直接量出右边div按照像素高度赋给左边。
但是左边元素竟然出现在了下边，没有与右边上下对齐。


后来经过百度与实验发现，将设置为inline-block时候，div并不能根据div边缘来对齐，而是根据里面的文字来对齐。很难通过设置文字对齐方式和调padding大小来达到对齐效果。
最终将两个div设置为float将问题解决。