JSFiddle - React, Tailwind, and code Playground

HTML

<div style="min-width:1024px;overflow:auto;">
	|<br />
	<span>Cap</span>
	<p>&nbsp;</p>
	<div>
	|<br />
		<span>CT-1</span>		
		<p>&nbsp;</p>
			<div>
			|<br />
				<span>CT-1-A</span>		
			</div>
			<div>
			|<br />
				<span>CT-1-B</span>		
			</div>
	</div>

	<div>
	|<br />
		<span>CT-2</span>
		<p>&nbsp;</p>
			<div>
			|<br />
				<span>CT-2-A</span>		
			</div>
			<div>
			|<br />
				<span>CT-2-B</span>		
			</div>
			<div>
			|<br />
				<span>CT-2-C</span>		
			</div>
	</div>

	<div>
	|<br />
		<span>CT-3</span>
		<p>&nbsp;</p>
			<div>
			|<br />
				<span>CT-3-A</span>		
			</div>
		
	</div>
	


</div>

CSS

div {
	padding-left : 20px;
	padding-right : 20px;
	text-align : center;	
	float : left;
	border : solid 1px #f1f1f1;
	border-top:solid 1px #ccc;
	border-tottom : none;	
	color : #ccc;
	margin : 8px;
}


span{
	padding : 10px;
	min-height : 30px;
	background : #3f47f2;
	color : orange;
}

p{
	clear = both;
}