JSFiddle - React, Tailwind, and code Playground

HTML

<div class="horizontal">
			<div class="horizontal-tile">
				<div class="title">
					Group 1
				</div>
				<div class="vertical">
					<div class = "vertical-tile">
					1
					</div>		
					<div class = "vertical-tile">
					2					 
					</div>
					<div class = "vertical-tile">
					3						 
					</div>
					<div class = "vertical-tile">
					4			  
					</div>
					<div class = "vertical-tile">
					5					  
					</div>			
					<div class = "vertical-tile">
					6				
					</div>	
					<div class = "vertical-tile">
					7						 
					</div>
				</div>	

			</div>
			
			<div class="horizontal-tile"><div class="test">
					<div class="title">
						Group 2
					</div>
					<div class="vertical">
						<div class = "vertical-tile">
						1						
						</div>		
						<div class = "vertical-tile">
						2					 
						</div>
						<div class = "vertical-tile">
						3						 
						</div>
					</div>	
				</div>
			</div>
						
			<div class="horizontal-tile">
					<div class="title">
						Group 2
					</div>
					<div class="vertical">
						<div class = "vertical-tile">
						1						
						</div>		
						<div class = "vertical-tile">
						2					 
						</div>
						<div class = "vertical-tile">
						3						 
						</div>
						<div class = "vertical-tile">
						4			  
						</div>
						<div class = "vertical-tile">
						5					  
						</div>			
						<div class = "vertical-tile">
						6				
						</div>	
						<div class = "vertical-tile">
						7						 
						</div>	
						<div class = "vertical-tile">
						8			   
						</div>
						<div class = "vertical-tile">
						9						
						</div>		
						<div class = "vertical-tile">
						10					 
						</div>
						<div class = "vertical-tile">
						11						 
						</div>
						<div class = "vertical-tile">
						12			  
						</div>
						<div class = "vertical-tile">
						13					  
						</div>			
						<div class = "vertical-tile">
						14				
						</div>	
						<div class =...

CSS

div.horizontal {
	white-space: nowrap;
	overflow:scroll;
	height:500px;
}

div.horizontal-tile {
	display:inline-block;
	background-color:green;
    height:500px;
	}

div.title {
	background-color:pink;
	}

div.vertical { 
		display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-webkit-box-pack: start;
	-moz-box-pack: start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	
	-webkit-align-self:flex-start;
	-ms-flex-item-align:start;
	align-self:flex-start;
	
	-webkit-box-align: start;
	-moz-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;		
		
	background-color:blue;
	max-height:100%;
}



div.vertical-tile {	
	order: 0;
    flex: 0 1 auto;
    align-self: auto;
	
    background: cyan;
    	
    width: 200px;
    height: 100px;
	margin: 0.5em;
	}