こういう現象の相談を受けてしばらく悩んだのだが謎が解けたのでまとめ

再現コード

結論

親divにdisplay: flexがついてない

子divにdisplay: inline-flexがついてる

divがインライン要素になったことでベースライン揃えが起きている

考察

左右に並べる目的では親divにdisplay: flexがあればいいだけなので子divには必要ない

だけども現実のコードはflexで整形した部品を組み合わせて行った結果、元からついていた

親divにdisplay: flexがついてない場合、divはデフォルトでブロック要素なので縦に並んでしまう

子divをdisplay: inline-flexにすると、インライン要素になるので左右に並ぶようになる

divの中にコンテンツがなかったりすると一見正しくレイアウトできたように見えてしまう

インライン要素のベースライン揃え