JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
		<article role="main"></article>
		<aside role="complimentary"></aside>
	</div>

CSS

#container {
	width:100%;
}

article[role="main"] {
	border:1px solid #009ac8;
	float: left;
	width: 600px / 960px * 100%;
	height: 300px;
}

aside[role="complimentary"] {
	border:1px solid #009ac8;
	float: right;
	width: 300px / 960px * 100%;
	height:300px;
}