JSFiddle - React, Tailwind, and code Playground

HTML

<div class='row'>
	<div class="item">
		<div class="sub-item"></div>
		<div class="sub-item"></div>
		<div class="sub-item"></div>
		<div class="sub-item"></div>
		<div class="sub-item"></div>
	</div>
	<div class="item">
		<div class="sub-item"></div>
		<div class="sub-item"></div>
		<div class="sub-item"></div>
		<div class="sub-item"></div>
		<div class="sub-item"></div>
	</div>
</div>

CSS

.row{
    background-color: red; 

	margin: 2em 0;
    display: block;
	text-align: center;
    white-space: nowrap;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6) inset;
    box-shadow: 0 1px 5px rgba(0,0,0,.6) inset;  
}
.item{
    background-color: silver;
    
	width: 50%;
	white-space: normal;
	display: inline-block;
}
.sub-item{
	background-color: royalblue;
    
	margin: .5em;
	width: 100px;
	height: 100px;
    text-align: center;
	display: inline-block;
}