JSFiddle - React, Tailwind, and code Playground

HTML

<flex style="background: yellow">
  <div>
    abc<br>def
  </div>
  <h1>
    abc
  </h1>
  <h1 style="font-size: 60px; margin-bottom: 0px;">
    def
  </h1>
  <img src="http://bing.com/favicon.ico" height=16 width=16 />
  <div style="height: 16px; width: 16px; background: red;"></div>
</flex>

CSS

flex { display: flex; }
flex > * { vertical-align: baseline; align-self: baseline; }