JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one" class="border">
    div 1
    <div id="wrapper">
        <div id="two" class="border">div 2</div>
        <div id="subcontainer">
            <div id="three" class="border">div 3</div>
            <div id="four" class="border">div 4</div>
        </div>
    </div>
</div>

CSS

div.border{
    border: 1px solid red;
    margin-bottom: 5px;
}

div#one{

}

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

div#two, div#subcontainer{
    display: inline-block;
    vertical-align: top;
}

div#two{
    width: 300px;
}

div#three, div#four{
    width: 140px;
}