JSFiddle - React, Tailwind, and code Playground

HTML

<div id="headleft">a little search form here</div>
<div id="headmiddle">
    <div class="active"><strong>Status:</strong> Active</div>
    <div class="search">Search results displayed</div>
</div>
<div id="headright">
    <dl>
        <dt>Legend:</dt>
        <dd>Status numero uno</dd>
        <dd>Status two</dd>
    </dl>
</div>

CSS

div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }