JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="left">
        <div class="brown"></div>
        <div class="green"></div>
        <div class="green"></div>
    </div>
    <div class="right">
        <div class="red"></div>
        <div class="orange"></div>
    </div>    
</div>

CSS

* { box-sizing: border-box; }

div { min-height: 100px; border:2px solid grey; }

.brown, .orange { min-height: 200px; }

.left { width: 66%; }
.right { width: 34%; }
.green { width: 50%; }

.left, .right, .green {
    float: left;
}

.content, .left {
    overflow: hidden;
}

/* couleurs */
.brown { background: brown; }
.green { background: green; }
.red { background: red; }
.orange { background: orange; }