JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<p>
        <span>baseline</span> 
        <em>32px</em>
        <i>1em</i>
        <i>100%</i>
</p>

CSS

p {
        border: 1px solid #0a0;
        font-size: 0;
        position: relative;
}
p *
    {
        font-size: 32px;      
    }
p:after
        {
                content: '';
                left: 0; right: 0;
                top: 50%;
                position: absolute;
                border-top: 1px dashed teal;
                transform: translateY(-50%);          
        }
span { vertical-align: baseline; background: #cc8; }
em{ vertical-align: 32px; background: #F93; }
i{ vertical-align: 1em; background: #FC0; }
i+i {vertical-align: 100%; background: #0CF; }