JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer"><div class="inner-1"></div><div class="inner-2"></div></div>
<div class="margin"></div>
<div class="outer2">
	<div class="inner-1"></div>
	<div class="inner-2"></div>
</div>

CSS

.outer{
	width:300px;
	height:100px;
	background:red;
    margin:0;border:0;padding:0;
}
.inner-1{
	background:green;
	width:150px;
	height:100px;
	margin:0;border:0;padding:0;
	display:inline-block;
}
.inner-2{
	background:yellow;
	width:150px;
	height:100px;
	margin:0;border:0;padding:0;
	display:inline-block;
}
.margin{
    margin-top:100px;
}
.outer2{
	width:310px;
	height:100px;
	background:red;
    margin:0;border:0;padding:0;
}