JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

	<div class="flx">
		alsldkj;lasdfj;l;asf
	</div>
	<div class="flx">
	asd
	</div>
	<div class="flx">
	asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfasdf>alsdflasdflasldjflasdjffla<br />sdjfalsdjfasdf
	<br />
	asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfs<br />adfasdfasdfasdfasdf>alsdflasdflasldjflasdjfflasdjfalsdjfasdf
	<br />
	</div>
	<div class="flx">
	asfdasdfasdfasasf
	</div>
	
	
</div>

CSS

.container {
	display: flex;
	
}
.flx {
	
	text-align: center;
	color: #fff;
	flex: 1;
	
	
}

.flx:nth-child(1) {
	background-color: green;
}

.flx:nth-child(2) {
	background-color: red;
}

.flx:nth-child(3) {
	background-color: blue;
}

.flx:nth-child(4) {
	background-color: aqua;
}