JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
		<div class="product">
			text <br>
			text <br>
			text <br>
			text <br>
			text <br>
		</div>
		<div class="product">
			text <br>
			text <br>
			text <br>
		</div>
		<div class="product">
			text
		</div>
		<div class="product">
			text
		</div>
		<div class="product">
			text <br>
			text <br>
			text <br>
			text <br>
		</div>
	</div>

CSS

.container {
			display: flex;
			flex-wrap: wrap;
			width: 600px;
			margin: 50px auto 0;
			background: green;
		}

		.product {
			box-sizing: boreder-box;
			width: 180px;
			margin-bottom: 15px;
			border: 1px solid #000;
			background: red;
		}

		.product:not(:nth-child(3n)) {
			margin-right: 27px;
		}