[CSS]vertical-alignの効かない別要素同士のベースラインを揃える

liをflexで横並びにした上で、英字と日本語を別フォントにするとベースラインが崩れる。同じ要素であれば揃うけど、別要素になるとずれる。

<ul>
  <li>HI-TEC-C</li>
  <li>ジェットストリーム</li>
</ul>

line-heightを指定する

line-heightを両方に指定してあげれば揃った。heightではダメ。

li {
  line-height: 1em;
}