JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<style type="text/css">
	.wrapper{
		max-width: 1080px;
		margin: 0 auto;
		border: 1px solid red;
		padding: 10px;
	}
	.clearfix:after{
		display: block;
		content: '';
		clear: both;
	}
	.left{
		width: 300px;
		border: 1px solid red;
		padding: 10px;
		float: left;
	}
	.right{
		margin-left: 360px;
		border: 1px solid red;
		padding: 10px;
	}
	.test{
		margin-bottom: 10px;
		padding: 10px;
		border: 1px solid red;
	}
	* > .test:last-child{
		margin-bottom: 0;
	}
	.fl{
		width: 50%;
		float: left;
		padding: 10px;
		border: 1px solid red;
		box-sizing: border-box;
	}
</style>
	<div class="wrapper clearfix">
		<div class="left">
			<div class="test"></div>
			<div class="test"></div>
			<div class="test"></div>
			<div class="test"></div>
			<div class="test"></div>
		</div>
		<div class="right">
			<div class="test clearfix">
				<div class="fl"></div>
				<div class="fl"></div>
			</div>
			<div class="test clearfix">
				<div class="fl"></div>
				<div class="fl"></div>
			</div>
			<div class="test clearfix">
				<div class="fl"></div>
				<div class="fl"></div>
			</div>
			<div class="test clearfix">
				<div class="fl"></div>
				<div class="fl"></div>
			</div>
			<div class="test clearfix">
				<div class="fl"></div>
				<div class="fl"></div>
			</div>
		</div>
	</div>
</body>
</html>