JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
	<div class="article">
        <div class="inner">article</div>
    </div>
	<div class="article">
        <div class="inner">article</div>
    </div>
	<div class="article">
        <div class="inner">article</div>
    </div>
</div>

<div class="row">
    <div class="right">
    	<div class="side">
            <div class="inner">side</div>
        </div>
    </div>
    
    <div class="left">
        <div class="row">
    		<div class="article">
        		<div class="inner">article</div>
    		</div>
        	<div class="article">
        		<div class="inner">article</div>
    		</div>
        </div>
        
        <div class="row">
    		<div class="article">
        		<div class="inner">article</div>
    		</div>
        	<div class="article">
        		<div class="inner">article</div>
    		</div>
        </div>
        
        <div class="row">
    		<div class="article">
        		<div class="inner">article</div>
    		</div>
        	<div class="article">
        		<div class="inner">article</div>
    		</div>
        </div>
    </div>
</div>

CSS

.row {
	overflow: hidden;
    zoom: 1;
}

.left {
	overflow: hidden;
}

.right {
    width: 33.3%;
	float: right;
}

.article {
	width: 33.3%;
    float: left;
    font-size: 20px;
    background: pink;
}

.article .inner {
	padding: 10px;
    border: red 2px solid;
}

.left .article {
	width: 50%;
}

.side {
    font-size: 20px;
	background: lightgreen;
}

.side .inner {
	padding: 10px;
    border: green 2px solid;
}