JSFiddle - React, Tailwind, and code Playground

by Emanuel Borsoi

HTML

<div class="div-table">
	<div class="div-table-row">
		<div class="div-table-first-col">
			<div>11:00</div>
		</div>
		<div class="div-table-col">
			<div style="height: 11">&nbsp;</div>
			<div class="appuntamentoContainer">
				<div class="appuntamento" style="height: 25px">11:12 - 12:35</div>
			</div>
		</div>
		<div class="div-table-col">
			<div style="height: 0"></div>
			<div class="appuntamento">11:00 - 11:45</div>
			<div class="appuntamento">11:00 - 12:00</div>
			<div class="appuntamento">11:45 - 12:30</div>
		</div>
		<div class="div-table-col">
			<div style="height: "></div>
		</div>
</div>

CSS

.div-table div.appuntamento {
	background-color: #f3f2de;
    padding: 3px 5px;
    border: 1px solid #d7dde6;
    border-radius: 5px;
}


.div-table {
	display:table;         
	width:auto;         
}
.div-table-row{
	display:table-row;
	width:auto;
	clear:both;
	height: 45px;
}
.div-table-first-row {
	font-weight: bold;
}
.div-table-col {
	float:left;/*fix for  buggy browsers*/
	display:table-column;         
	width:154px;
}
.div-table-row .div-table-col{
	border-left: 1px solid #d7dde6;
	border-right: 1px solid #d7dde6;
	border-top: 1px solid #d7dde6;
	min-height: 44px;         
}
.div-table-first-col {
  	float:left;/*fix for  buggy browsers*/
  	display:table-column; 
	text-align: right;
	width: 45px;
}
.div-table-first-col div{
	padding: 3px 5px;
}