JSFiddle - React, Tailwind, and code Playground

by Shuaib Khan

HTML

<div class="parent">
	<div class="child">
	
	</div>
	
	<div class="child">
	
	</div>
	<div class="child">
	
	</div>
	<div class="child">
	
	</div>
</div>

CSS

.parent{
	display:flex;
	align-items:center;
	justify-content:center;
	height:100vh;
	background-color: red;
}
.child{
	width:50px;
	height:50px;
	background-color:orange;
	margin:2px;
}

.child:nth-child(1){
	justify-self:start;
	flex:1
}
.child:nth-child(4){
	flex:1;
}