JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div class='box'><div><h2>Box 1</h2></div></div>
<div id='clear'></div>
</div>

CSS

.box {
	float: left;
	height: 0;
	width: 38%;
	padding-bottom: 38%;
	background-color: #b3d4fc;
	margin-left: 8%;
}

.box div {
	height: 100%;
	width: 100%;
	border: 1px solid black;
	display: block;
    padding-bottom: 100%
}

div#clear {
	clear:both;
}