JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>

CSS

dl {
    width: 300px; 
    background: #00ffff; /* blue spaces */    
}
dt {
    float: left;
    clear: left;
    width: 100px;
    font-weight: bold;
    background: #888;
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    background: #eee;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}