JSFiddle - React, Tailwind, and code Playground

by Марина Бабенко

HTML

<div class="grid">
	<div class="cell cell--col2 cell--sm4">
		<div style="height: 100px; border: 1px solid #000;">1</div>
	</div>
	<div class="cell cell--col2 cell--sm4">
		<div style="height: 50px; border: 1px solid #000;">2</div>
	</div>
	<div class="cell cell--col2 cell--sm4">
		<div style="height: 50px; border: 1px solid #000;">3</div>
	</div>
	<div class="cell cell--col2 cell--sm4">
		<div style="height: 50px; border: 1px solid #000;">4</div>
	</div>
	<div class="cell cell--col2 cell--sm4">
		<div style="height: 50px; border: 1px solid #000;">5</div>
	</div>
	<div class="cell cell--col2 cell--sm4">
		<div style="height: 50px; border: 1px solid #000;">6</div>
	</div>
</div>

CSS

.grid {
	display: flex;
	flex-wrap: wrap;
}
.cell {
	display: inline-block;
}
.cell--col2 {
	width: 16.66667%;
}
@media (max-width: 768px) {
	.cell--sm4 {
		width: 33.33333%;
	}
}