JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">Single</div>
<div class="box">Double Line</div>
<div class="box fix">Double Fix</div>

CSS

/*Setup CSS for Demo - Not important*/
html,body {
    height:100%;
    width:100%;
}
.box {
    height: 20%;
    width: 65px;
    background-color: #81AFCE;
    float:left;
    margin-right:20px;
    text-align:center;
}
/*Important CSS*/
.box {
    font-size:1em;/*Set a font size*/
}
.box:before {/*add a pseudo element*/
    content:"";
    display:block;
    height:50%;
    width:100%;
    margin-top:-0.5em;/*half of the font size*/
}
.fix:before {
    margin-top:-1em !important;/*half of the font size X the number of lines*/
}