JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<div id="calendar">
<div class="column" id="day1">
<div class = "truck" id="day1_truck1">
<p>This is truck one</p>
</div>
<div class = "truck" id="day1_truck1">
<p>This is truck one</p>
</div> </div>
<div class="column" id="day2">
<div class = "truck" id="day2_truck1">
<p>This is truck one</p>
</div>
<div class = "truck" id="day2_truck1">
<p>This is truck one</p>
</div> </div>
<div class="column" id="day3">
<div class = "truck" id="day3_truck1">
<p>This is truck one</p>
</div>
<div class = "truck" id="day3_truck1">
<p>This is truck one</p>
</div> </div>
<div class="column" id="day4">
<div class = "truck" id="day4_truck1">
<p>This is truck one</p>
</div>
<div class = "truck" id="day4_truck1">
<p>This is truck one</p>
</div> </div>
<div class="column" id="day5">
<div class = "truck" id="day5_truck1">
<p>This is truck one</p>
</div>
<div class = "truck" id="day5_truck1">
<p>This is truck one</p>
</div> </div>
<div class="column" id="day6">
<div class = "truck" id="day6_truck1">
<p>This is truck one</p>
</div>
<div class = "truck" id="day6_truck1">
<p>This is truck one</p>
</div> </div>
<div class="column" id="day7">
<div class = "truck" id="day7_truck1">
<p>This is truck one</p>
</div>
<div class = "truck" id="day7_truck1">
<p>This is truck one</p>
</div> </div>
</div>
</div>
CSS
#main
{
border-style: solid;
border-width: 1px;
border-color: black;
width:97%;
height:900px;
margin:50px, auto, 10px, auto;
padding: 1%;
overflow: auto;
white-space: nowrap;
}
#calendar
{
}
.column
{
border-style: solid;
border-width: 1px;
border-color: black;
min-width:12%;
max-width:100%;
width:auto;
height:800px;
display: inline-block;
margin-left:1%;
overflow: auto;
}
.header
{
padding:0;
margin:0;
text-align: center;
font-style: bold;
}
.truck
{
width:auto;
border-style: solid;
border-width: 1px;
border-color: black;
display:inline-block;
}