JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
		<div id="left">
			<div class="block1">1</div>
			<div class="block1">2</div>
		</div>
		<div id="right">
			<div class="block2">3</div>
			<div class="block2">4</div>
			<div class="block2">5</div>
			<div class="block2">6</div>
		</div>
	</div>

CSS

* { margin: 0px; padding: 0px; border: 0px;}

#wrapper { width: 640px;}
#wrapper #left, #right { width: 310px; float: left; }
#wrapper #left .block1 { width: 300px; height: 300px; margin: 10px 0px; border: 1px solid #ccc; background: #f1f1f1;}
#wrapper #right .block2 { width: 300px; height: 150px; margin: 10px 0px; border: 1px solid #ccc; background: #f1f1f1;}