JSFiddle - React, Tailwind, and code Playground

HTML

<table
      class="atable"
      cellspacing="0"
      cellpadding="0"
      style="font-size: 10pt"
    >
      <thead>
        <tr>
          <th><div class="top">Header0</div></th>
          <th><div class="top">Header1</div></th>
          <th><div class="top">Header2</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th><div class="side">Header1</div></th>
          <td
            style="
              vertical-align: bottom
            "
          >
            <div class="main">
            <span style="
              font-size:6pt;
              background-color: red;
            ">A</span>
            </div>
          </td>
          <td>
            <div class="main">
            <span style="
              font-size:6pt;
              background-color: blue;
            ">B</span>
            </div>
          </td>
        </tr>
        <tr>
          <th><div class="side">Header2</div></th>
          <td>
            <div class="main">
            <span style="
              font-size:30pt;
              background-color: yellow;
              right: 0px
            ">C</span>
            </div>
          </td>
          <td>
            <div class="main">
            <span style="
              font-size:30pt;
              background-color: green;
            ">Dqeqweqeqwe
            qe
            e
            qeq
            eqe
            qweqwe</span>
            </div>
          </td>
        </tr>
        <tr>
          <th><div class="side">Header2</div></th>
          <td>
            <div class="main">
            <span style="
              font-size:30pt;
              background-color: yellow;
              right: 0px
            ">E</span>
            </div>
          </td>
          <td>
            <div class="main">
            <span style="
              font-size:6pt;
              background-color: blue;
            ">F</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

CSS

table {
        border-width: 1px;
        border-style: none none solid solid;
      }

      th, td {
        border-width: 1px;
        border-style: solid solid none none;
        overflow: hidden;
      }

      .top, .side, .main {
        position: relative;
        width: 50px;
        height: 18px;
      }

      td span {
        position: absolute;
        top:0px;
      }

      .atable th:nth-child(3) > div,
      .atable td:nth-child(3) > div {
        width:25px;
      }

      .atable tr:nth-child(3) div {
        height:10px
      }