JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td>
<div id="headleft">
<table cellspacing="0" cellpadding="3">
<tr>
<td>
<div>a little search form here</div>
</td>
</tr>
</table>
</div>
<div id="headmiddle">
<span class="color status active bold">Status:
<span class="normal">Active</span>
</span>
<span class="color status search">Search results displayed</span>
</div>
<div id="headright">
<table width="200" cellspacing="0" cellpadding="0">
<tr>
<td colspan="1" class="bold">Legend:</td>
<td colspan="1" class="ltz legtext">Status numero uno</td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan class="managed legtext">Status two</td>
</tr>
</table>
</div>
<div class="cleaner"> </div>
</td>
</tr>
</table>
CSS
body {
margin:0;
padding:0;
}
.color {
height:14px;
border-style:solid;
border-width:1px;
}
.status {
margin-left:5px;
margin-top:2px;
padding-left:2px;
padding-right:2px;
}
#headmiddle span.status { display: block }
.bold {font-weight:bold;}
.normal {font-weight:normal;}
.legtext {padding:0 0 0 5px;}
#headleft {
float:left;
margin:0;
padding-left:5px;
font-size: 0.8em;
}
#headright{
float:right;
width:50px;
margin:0;
padding-right:5px;
font-size:0.8em;
}
#headmiddle {
padding-left: 50px;
margin: 0 100px 0 100px;
font-size: 0.8em;
}
.search {background:orange;}
.active {background:#8ed200;}
.cleaner{
clear: both;
height: 1px;
font-size: 1px;
border:none;
margin:0;
padding:0;
background:transparent;
}