JSFiddle - React, Tailwind, and code Playground

HTML

<a href="nowhere" class="container">
    1.
    <span class="a">A.</span>
    <span class="b">b b b b b b b</span>
</a>

CSS

.container {
    display: block;
    overflow: hidden;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
    font-size: 2.5em;
}
.a {
    font-size: 2em;
    line-height: 60px;
    vertical-align: middle;
}
.b {
    display: inline-block;
    line-height: 60px;
    font-size: 23px;
    vertical-align: middle;
}









/* stylistic stuff that shouldn't matter */

.container {
    width: 100%;
    text-align: center;
    background-color: lightgreen;
    text-decoration: none;
}
.a {
    font-size: 2em;
    line-height: 60px;
}
.b {
    font-family: sans-serif;
    text-align: center;
}