JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
	<h2><b>Using Bootstrap</b><br>Each DIV is 6 columns wide with a variable height.<br>They're inside the same row.</h2><br>
	<div class="row">
		<div class="col-xs-6">
			<div class="div1">DIV 1</div>
		</div>
		<div class="col-xs-6">
			<div class="div2">DIV 2</div>
		</div>
		<div class="col-xs-6">
			<div class="div3">DIV 3</div>
		</div>
		<div class="col-xs-6">
			<div class="div4">DIV 4</div>
		</div>
		<div class="col-xs-6">
			<div class="div5">DIV 5</div>
		</div>
		<div class="col-xs-6">
			<div class="div6">DIV 6</div>
		</div>
	</div>
</div>

CSS

body {
	margin: 20px;
}

.container {
	padding: 0 10px;
}

@media (min-width: 768px) {
	.container {
		width: 768px;
	}
}

@media (min-width: 992px) {
	.container {
		width: 868px;
	}
}

.div1, .div2, .div3, .div4, .div5, .div6 {
	background-color: #999;
	border-radius: 6px;
	width: 100%;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font: bold 28px 'Arial'; 
}

.div1 {
	height: 120px;
}

.div2 {
	height: 260px;
}

.div3 {
	height: 140px;
} 

.div4 {
	height: 180px;
}

.div5 {
	height: 200px;
} 

.div6 {
	height: 90px;
}

.row {
	background-color: #CCC;
	border-radius: 6px;
	padding: 5px;
	margin: 0;
}

[class*="col-"] {
	display: table;
	padding: 5px;
}