JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="clearfix">
    <dt>TDC<br />Channel</dt>
    <dd>B</dd>
</dl>

CSS

dl {
    background: #B5B8BE;
    color:#415987;
    display:inline-block;
    font-family: Helvetica, Arial, sans-serif;
    padding:1.5% 1% 1%;
}

dt {
    clear: left;
    float:left;
    font-size:0.8em;
    line-height:1em;
    text-transform: uppercase;
}

dd {
    float:left;
    font-size:1.9em;
    font-weight: bold;
    line-height:1em;
    margin: -0.1em 0 0 0.1em;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}