JSFiddle - React, Tailwind, and code Playground

HTML

<table>
	<tr>
		<th></th>
		<th colspan="2">Tuesday</th>
	</tr>
	<tr>
		<td>8:00</td>
		<td colspan="2" rowspan="2">-</td>
	</tr>
	<tr>
		<td>9:00</td>
	</tr>
	<tr>
		<td>10:00</td>
		<td rowspan="2" class="collision-left">2 hour long lesson</td><td rowspan="3" class="collision-right">3 hour long lesson</td>
	</tr>
	<tr>
		<td>11:00</td>
	</tr>
	<tr>
		<td>12:00</td>
		<td rowspan="2" class="collision-left">-</td>
	</tr>
	<tr>
		<td>13:00</td>
		<td class="collision-right">-</td>
	</tr>
</table>

CSS

table,th,td
{
	border: 2px solid black;
}

table
{
	border-collapse: collapse;
	text-align: center;
}

td.collision-left
{
	border-right-width: 1px;
}

td.collision-right
{
	border-left-width: 1px;
}