JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stack-vert">
    <div class="stack-vert">
        <div class="content">Vert 1</div>
        <div class="content">Vert 2</div>
    </div>
    <div class="stack-horz">
        <div class="content" style="width: 50px; height: 75px;">Horz 1</div>
        <div class="content" style="width: 50px; height: 50px;">Horz 2</div>
        <div class="content" style="width: 100px; height: 200px;">Horz 3</div>
        <div class="stack-vert">
            <div class="content">Horz 4, Vert 1</div>
            <div class="content">Horz 4, Vert 2</div>
        </div>
    </div>          
    <div class="stack-vert">
        <div class="content">Vert 3</div>
        <div class="content">Vert 4</div>
    </div>
</div>
<div>
  <div>Horz 4, Vert 1</div>
  <div>Horz 4, Vert 2</div>
</div>

CSS

DIV.stack-vert
{
    border: solid thick red;
    overflow:hidden;
}

DIV.stack-horz
{
    border: solid thick blue;
    overflow:hidden;
}

DIV.content
{
    padding: 5px;
    background-color: grey;
    margin: 5px;

}

DIV.stack-horz DIV.content
{
    float:left;
}