JSFiddle - React, Tailwind, and code Playground
HTML
<!-- september 3 -->
<table class="table">
<thead>
<tr>
<th>
Wednesday, September 3
</th>
<th>
Pre-K/K Orientation
</th>
</tr>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!-- september 4 -->
<table class="table">
<thead>
<tr>
<th>
September 4,
</th>
<th>
First Day of School
</th>
</tr>
<tbody>
<tr>
<td>
<ul>
<li>8:30 am: Pre-K/K</li>
<li>8:15 am: 1st–8th grade</li>
<li>Noon closing for all grades</li>
</ul>
</td>
<td></td>
</tr>
</table>
<!-- september 8 -->
<table class="table">
<thead>
<tr>
<th>
Monday, September 8,
</th>
<th>
Classes begin, FULL DAY
</th>
</tr>
<tbody>
<tr>
<td>
<ul>
<li>8:30 am: Pre-K/K</li>
<li>8:15 am: 1st–8th grade</li>
<li>2:45 pm closing for all grades</li>
</ul>
</td>
<td></td>
</tr>
</table>
CSS
.table
{
margin:1em;
}
.table thead tr th
{
width:100%;
max-width:18.75em;
overflow:hidden;
white-space:nowrap;
vertical-align:top;
line-height:110%;
padding:0;
}
.table thead tr th:first-child:after
{
content:" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
.table ul
{
list-style:none;
margin:1em 0;
padding:0;
}