JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="left">
        <div class="brown"></div>
        <div class="row">
            <div class="green"></div>
            <div class="green"></div>
        </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; }

.content, .row { 
    display: table; 
    width: 100%; 
}
.left, .right, .green {
    display: table-cell;
    vertical-align: top;
}

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

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