JSFiddle - React, Tailwind, and code Playground

by huskydawgs

HTML

<div class="equalHMWrap eqWrap">
    <div class="equalHM eq">boo <br> boo</div>
    <div class="equalHM eq">shoo</div>
    <div class="equalHM eq">clue</div>
  </div>

CSS

.paddingBlock {
	padding: 20px 0;
}

.eqWrap {
	display: flex;
}

.eq {
	padding: 10px;
}

.eq:nth-of-type(odd) {
	background: yellow;
}

.eq:nth-of-type(even) {
	background: lightblue;
}

.equalHW {
	flex: 1;
}

.equalHMWrap {
	justify-content: space-between;
}

.equalHM {
	width: 32%;
}

.equalHMRWrap {
	justify-content: space-between;
	flex-wrap: wrap;
}