JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="parent">
	<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio labore a at sapiente molestiae nam dicta, ea ipsam voluptatum adipisci consectetur magni perspiciatis expedita deleniti ipsum blanditiis, excepturi laborum quasi.</div>
	<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
	<div class="child">Lorem ipsum dolor sit amet.</div>
	<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
	<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
	<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
	<div class="child">Lorem ipsum dolor sit amet, consectetur.</div>
	<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

SCSS

* {
	box-sizing: border-box
}

.parent {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.child {
	background: #000;
	color: #fff;
	flex: 1 0 25%;
	margin: 1rem;
	padding: 1rem;
}