JSFiddle - React, Tailwind, and code Playground
HTML
<div class="dvApptHolderSub">
<div style="position:absolute;
float:left;
width:50%;
margin-right:-5px;
height: 200px; background: rgba(255, 0, 0, 0.8);">
<div style="float: none; width: 100% !important;">
<div>
<a href="javascript:void(0);">
<span>MON</span>
<br>
<span>050812</span>
</a>
</div>
</div>
<div style="float: none; width: 100% !important;">
<div>
<div>
<span>0830</span>
<br>
<span>Beverly Hills Hospital</span>
</div>
</div>
</div>
</div>
<div style="position:absolute;
float:left;
width:50%;
margin-right:-5px;
height: 200px; background: rgba(0, 255, 0, 0.8);">
<div style="float: none; width: 100% !important;">
<div class="tabGroup">
<a href="javascript:void(0);">
<span>TUESDAY</span>
<br>
<span>050912</span>
</a>
</div>
</div>
<div style="float: none; width: 100% !important;">
<div>
<div>
<span>0830</span>
<br>
<span>Beverly Hills Center</span>
</div>
</div>
</div>
</div>
<div style="position:absolute;
float:left;
width:50%;
margin-right:-5px;
height: 200px; background: rgba(0, 0, 255, 0.8);">
<div style="float: none; width: 100% !important;">
<div class="tabGroup">
<a href="javascript:void(0);">
<span>WEDNESDAY</span>
<br>
<span>051012</span>
</a>
</div>
</div>
<div style="float: none; width: 100% !important;">
<div>
<div>
<span>0830</span>
<br>
<span>Beverly Hills Cyclone</span>
</div>
</div>
</div>
</div>
</div>
CSS
div.dvApptHolderSub {
position:relative;
z-index: 10;
background-color: #ffffff;
padding: 0 !important;
border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #ddd;
margin-top: 6px;
margin-left: 0.4%;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
width: 250px;
height:200px;
float: left;
overflow:auto;
white-space : nowrap;
}
* {
padding: 0;
margin: 0;
}