flexboxで縦並びの要素を横並びにした際に下の要素の位置を揃える方法

こんにちは
MaromaroのTakaです。
タイトル少し分かり辛いですが、
↓画像のように文章が増減する２列に横並びする同じ高さの要素があった際に、
緑のラインの位置で要素の位置を揃えたいことが多々あるかと思います。

See the Pen
bGBJgLv by 佐々木 貴徳 (@whxwrxyj)
on CodePen.

上記のようにただflexを設定し横並びにするだけでは、
綺麗に位置は揃いません。
そこで↓のように横並びになっている各要素にflexを付与し、
flex-direction:columnを指定し、
下付きにしたい要素にmargin-top:autoを付与すると位置が揃います。

See the Pen
poRweEj by 佐々木 貴徳 (@whxwrxyj)
on CodePen.

flexboxは簡単な指定で様々なレイアウトを実現することが出来ますので、
使い方を覚えればコーディングの大幅な時間短縮につながると思います。
最近は、IE等でも崩れず問題なく使えますので、有効活用したいですね！
以上、Takaでした。