JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="one" class="border clearfix">one
        <div id="wrapper">
            <div id="two" class="border">two</div>
            <div class="subcontainer">
                <div id="three" class="border">three</div>
                <div id="four" class="border">four</div>
            </div>
        </div>
    </div>
    
      
</div>

CSS

div.border{
    border: 1px solid red;
}

div#wrapper{
    width: 400px;
    margin: 0 auto;
}

div#two{
    width: 250px;
    float: left;
}

div.subcontainer{
    float: right;
    width: 130px;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}