JSFiddle - React, Tailwind, and code Playground

HTML

<dl>
    <dt style="display:block;height:16px;width:16px;"></dt>
    <dd>TEXT1</dd>
    <dt style="display:block;height:16px;width:16px;"></dt>
    <dd>TEXT2<br />TEXT2<br />TEXT2</dd>
    <dt>X</dt>
    <dd>TEXT3</dd>
    <dt style="display:block;height:16px;width:16px;"></dt>
    <dd>TEXT4</dd>
</dl>

CSS

dl {
    overflow: hidden;
    font-size: 12px;
}
dt { 
    float: left;
    background-color:green;
}
dd {
    margin-left:30px;
    background-color:red;
}
dd:after {
    content: " ";
}