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 3
					</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-x:scroll;
    overflow-y:hidden;
	height:500px;
    }

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

div.title {
	background-color:pink;
	}

div.vertical { 
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-self:flex-start;
	align-items: flex-start;				
	background-color:blue;
	height:100%;
}

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

JavaScript

$(document).ready(function() {
 $('.vertical').each(function( index ) {
     var lastChild = $(this).children().last();
     var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
     $(this).width(newWidth);
    })
});