JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="section2">
	<div class="container">
        <div class="col half col1"><article>MAP</article></div>
		<div class="col half col2" style="background-color:#069;">
			<div class="row row1">
        	    <div class="col col1 quarter"><article>BOX 1</article></div>
        	    <div class="col col2 quarter"><article>BOX 2</article></div>
         	</div>
			<div class="row row2">
	            <div class="col col1 quarter"><article>BOX 3</article></div>
    	        <div class="col col2 quarter"><article>BOX 4</article></div>
          	</div>
        </div>
        <br/>
	</div>
</div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container {
	margin: auto;
    max-width: 900px;
}

.col { 
	float: left;	
}

.half {	
	height:50vw;
}

.half.col1 {	
    width:48vw;
    height:20px;
}
.half.col2 {	
    width:50vw;
}

.quarter {
	width:24vw;
    height:24vw;
}

.half.col1, .quarter.col1 {
	margin-right: 2vw;
}

.row1 .quarter {
	margin-bottom: 2vw;
}

.container article {
    background: #eee;
    height: 50vw;
    max-height: 100%;
    padding: 20px; 
    box-sizing: border-box;
}

@media (min-width: 900px) {
    /*hard code these numbers*/
    .half {	
        height: 450px;
    }
    
    .half.col1 {	
        width: 432px;
    }
    .half.col2 {	
        width: 450px;
    }
    .quarter {
        width: 216px;
        height: 216px;
    }
    
    .half.col1, .quarter.col1 {
        margin-right: 18px;
    }
    
    .row1 .quarter {
        margin-bottom: 18px;
    }
}