CSSで要素の縦並びを中央揃えにしたり上揃えにしたりしたくなる時ありますよね？

単に中央揃えにしたかったら親要素を次の通りにすればいいだけです。

.parent {
  display: flex;
  align-items: center;
}

でも、ある子要素だけ中央揃えでなくベースラインにしたい場合はどうすればいいでしょうか？

調べたところ、どうやらalign-selfをその子要素に設定すればいいようでした。

.parent {
  display: flex;
  align-items: center;
}

.top {
  align-self: baseline;
}

コードの全体はCodePenに上げました。
https://codepen.io/kter/pen/jOqJEGO