JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.leftit {
        float: left;
        font-size: 0.8em;
    }
    .rightit {
        float: right;
        font-size: 0.8em;
    }
    .centerit {
        width:200px;
        margin-right: auto;
        margin-left: auto;
        font-size: 0.8em;
    }
    #headmiddle div {
        border: 1px solid #000; 
        margin-bottom: 3px;
    }
    .centerpage {
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }
    
    strong { font-weight: bold; }
    
    .search { background: orange; }
    .active { background: #8ed200; }
    
    dt { float: left; font-weight: bold; }
    dd { margin-left: 4.5em; }