JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
      <tr>
          <th><span>Shorter Title</span></th>
          <th><span>Much Much Longer Title</span></th>
      </tr>
</thead>
<tbody>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</tbody>
</table>

CSS

table, tr, td, th {
  border: 1px solid #000;
  position: relative;
  padding: 10px;
}

th span {
  transform-origin: 0 50%;
  transform: rotate(-90deg); 
  white-space: nowrap; 
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
}

JavaScript

$(function() {
    var header_height = 0;
    $('table th span').each(function() {
        if ($(this).outerWidth() > header_height) header_height = $(this).outerWidth();
    });

    $('table th').height(header_height);
});