JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_block">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>
<div class="secondary_block">
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

CSS

.main_block,
.secondary_block {
	width: 400px;
	height: 50px;
	overflow: hidden;
	clear: both;
}

.main_block div,
.secondary_block div {
	width: 100px;
	height: 50px;
	text-align: center;
	float: left;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #ccc;
  padding-top: 17px;
  color: #fff;
}

.main_block div {
	background: green;
}
.secondary_block div {
	background: blue;
}