JSFiddle - React, Tailwind, and code Playground

by Meredith Crow

HTML

<div id="main_section" class="main_align" >
    <span>
        &nbsp;
        <span class="small vam">A Very Small Text</span>
        &nbsp;
        <span class="medium vam">Medium String</span>
    </span>
</div>

CSS

.main_align {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}
.vam {
    vertical-align: middle;
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
}
span.vam {
    display: inline-block;
}
.vam img {
    vertical-align: top; /* removes a white gap below image */
}

.medium {
    font-size: medium
}

.small {
    font-size: x-small
}