JSFiddle - React, Tailwind, and code Playground

HTML

<table style = "border-collapse: collapse"  border = "1px">

  <thead>
    <tr>
    <th colspan="6" align="center"> Time Table </th>
    </tr>


    <tr>
       <th>DAY/TIME</th>
       <th>8-9</th>
       <th>9-10</th>
       <th>10-11</th>
       <th>11-12</th>
      <th rowspan = "6" id="verticalText">Lunch Break</th>
     </tr>

    <tr>
      <th>Mon</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

    <tr>
      <th>Tue</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

    <tr>
      <th>Wed</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

    <tr>
      <th>Thu</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

    <tr>
      <th>Fri</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>


  </thead> 

</table>

JavaScript

$(function() {
    var html=$('#verticalText').html();
    var newHtml='';
    for (var i=0;i<html.length;i++) {
        newHtml=newHtml+html[i];
        newHtml=newHtml+'<br/>';
    }
    $('#verticalText').html(newHtml);
});