JSFiddle - React, Tailwind, and code Playground

HTML

<div id="schedule">

  <ul class="timetable day2">
    <li class="date">date</li>
    <li>
      <ul class="multievent">
        <li class='suite1 firstchild' style="height: 28px;">one line</li>
        <li class='suite2' style="height: 28px;">one line</li>
        <li class='suite3' style="height: 28px;">one line</li>
        <li class="suite4" style="height: 28px;">one line</li>
      </ul>
    </li>
    <li>
      <ul class="multievent">
        <li class='suite1' style="height: 58px;">two line  asdasdf two line</li>
        <li class='suite2' style="height: 58px;">two line  asdfasdftwo line</li>
        <li class='suite3' style="height: 58px;">one line</li>
        <li class="suite4" style="height: 58px;">two line asdfasdf two line</li>
        <li class="ball noborder" style="height: 58px;">two line asdfasdf two line</li>
      </ul>
    </li>
    <li>
      <ul class="multievent">
        <li class='suite1' style="height: 58px;">two line  asdasdf two line</li>
        <li class='suite2' style="height: 58px;">three line  asdfasdasdff three line</li>
        <li class='suite3' style="height: 58px;">two line  asdfasdftwo line</li>
        <li class="suite4" style="height: 58px;">two line asdfasdf two line</li>
        <li class="ball noborder" style="height: 58px;">two line asdfasdf two line</li>
      </ul>
    </li>
    <li>
      <ul class="multievent">
        <li class='suite1' style="height: 58px;">two line  asdasdf two line</li>
        <li class='suite2' style="height: 58px;">two line  asdff two line</li>
        <li class='suite3' style="height: 58px;">two line  asdfasdftwo line</li>
        <li class="suite4" style="height: 58px;">two line asdfasdf two line</li>
        <li class="ball noborder" style="height: 58px;">two line asdfasdf two line</li>
      </ul>
    </li>
    </ul>

CSS

ul {
  display: table;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#schedule {
  width: 700px;
  height: 100%;
  overflow: hidden;
  text-align: center;
}
.times {
  float: left;
  width: 70px;
  margin: 30px 0 0 0;
}
.timetable {
  width: 600px;
  float: right;
  border-left: 2px solid #999;
  border-right: 2px solid #999;
}
.timetable li {
  border-bottom: 2px solid #999;
  word-wrap:break-word;
}
.times li {
  border-top: 2px solid #999;
  text-align: right;
  height: 28px;
}
.date {
  text-align: center;
  line-height: 30px;
}
.multievent li {
  display: inline-block;
  width: 110px;
  border: none;
  border-right: 2px solid #999;
}
li.noborder {
  border: none;
}
li.firstchild {
  border-left: 2px solid #999;
}

.suite1 {
  background-color: rgba(247, 150, 70, 0.5);
}
.suite2 {
  background-color: rgba(255, 255, 153, 0.5);
}
.suite3 {
  background-color: rgba(75, 172, 198, 0.5);
}
.suite4 {
  background-color: rgba(128, 100, 162, 0.5);
}
.ball {
  background-color: rgba(51, 153, 102, 0.5);
}
.venue {
  background-color: rgba(0, 112, 192, 0.5);
}
.misc {
  background-color: rgba(204, 204, 204, 0.5);
}