JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
<pre></pre>
    <pre>p { font-size:10px; }</pre>
    <pre>p { font-size:28px; }</pre>
    <pre>p { font-size:40px; }</pre>
</div>
<div class="l100 h100">
<pre>p { line-height: 100px; }
</pre>
    <p class="f0"><i>xxx</i>z<span>100x100</span>Z<i>xxx</i></p>
    <p class="f1"><i>xxx</i>z<span>100x100</span>Z<i>xxx</i></p>
    <p class="f2"><i>xxx</i>z<span>100x100</span>Z<i>xxx</i></p>
</div>
<div class="ln h100">
<pre>p { line-height: normal; }
</pre>
    <p class="f0"><i>xxx</i>z<span>100x100</span>Z<i>xxx</i></p>
    <p class="f1"><i>xxx</i>z<span>100x100</span>Z<i>xxx</i></p>
    <p class="f2"><i>xxx</i>z<span>100x100</span>Z<i>xxx</i></p>
</div>
<div class="ln h98">
<pre>p { line-height: normal; }
span { height: 98px; }
</pre>
    <p class="f0"><i>xxx</i>z<span>100x98</span>Z<i>xxx</i></p>
    <p class="f1"><i>xxx</i>z<span>100x98</span>Z<i>xxx</i></p>
    <p class="f2"><i>xxx</i>z<span>100x98</span>Z<i>xxx</i></p>
</div>
<div class="ln h98 work">
<pre>p { line-height: normal; }
span { height: 98px; }
p:before {
    display: inline-block;
    content: '';
    height: 100px; width: 5px;
    vertical-align: middle;
}
</pre>
    <p class="f0"><i>xxx</i>z<span>100x98</span>Z<i>xxx</i></p>
    <p class="f1"><i>xxx</i>z<span>100x98</span>Z<i>xxx</i></p>
    <p class="f2"><i>xxx</i>z<span>100x98</span>Z<i>xxx</i></p>
</div>

CSS

div { overflow: hidden;}
p>*{font-size:10px;}
i { background: #F90;}
p, pre {
    float: left;
    margin: 5px;
    height: 100px;
    border: 1px solid black;
    padding: 0;
    width: 200px;
}
pre { font-size: 10px;}
.header pre { height: 20px;}
span {
    display: inline-block;
    width: 100px;
    background: magenta;
    vertical-align: middle;
    line-height: normal;
}
/* ================================= */
.f0 { font-size:10px; }
.f1 { font-size:28px; }
.f2 { font-size:40px; }
.l100 > p {
    line-height: 100px;
}
.ln > p   { line-height: normal; }
.h100 span { height: 100px; }
.h98 span { height: 98px; }

.work > p:before {
    display: inline-block;
    content: '';
    height: 100px;
    width: 5px;
    background: lime;
    vertical-align: middle;
}