JSFiddle - React, Tailwind, and code Playground

HTML

<div id="expand-box">
   <div id="expand-box-header" class="clearfix">
      <span style="float: left;">Top left header</span> 
      <span style="float: right;">Top right header</span>
   </div>
    <div id="expand_box_sub_header">Lorem ipsum dorem nori seota ostiy</div>
</div>

CSS

#expand-box {
    width: 100%;
    padding: 0;
    border: 2px solid #BBB;
    margin: 7px 0 0 0;}

#expand-box-header {
    background-color: #BBB;
    margin: 0;
    color: #FFF;
    padding: 0 0 3px 2px;}

#expand_box_sub_header { clear: both; }

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}  
.clearfix{ display: inline-block;}  
html[xmlns] .clearfix { display: block;}  
* html .clearfix{ height: 1%;}  
.clearfix {display: block}