JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
    <tr>
      <th style="width: 130px;"><div class="thContent">Category</div></th>
      <th style="width: 100px;"><div class="thContent">Title</div></th>
      <th style="width: 200px;"><div class="thContent">Description</div></th>
      <th style="width: 50px;"><div class="thContent">$</div></th>
      <th style="width: 40px;"><div class="thContent">No</div></th>
      <th style="width: 120px;"><div class="thContent">Date</div></th>
      <th style="width: 100px;"><div class="thContent">Other</div></th>
    </tr>
  </thead>

  <tr>
    <td colspan=100>
      <div class="widgetWrap" style="width: 100%; height: 60px; background-color: #dfffc1;">
        <div class="labelWid" style="left: 2px; top: 6px; width: 150px; background-color: #c7aee0; font-weight: bold; font-size: 20px; padding: 2px 3px;">Label</div>

        <div class="labelWid" style="left: 200px; top: 10px; width: 250px;  font-size: 15px; padding: 2px 3px;">Label Title Looooooong</div>

        <div class="labelWid" style="left: 200px; top: 30px; width: 250px;  font-size: 13px; color: #999; padding: 2px 3px;">2130-12-06</div>
      </div>

    </td>
  </tr>


  <tr>
    <td rowspan=1000 style="vertical-align: top; width: 130px;">
      <div class="widgetWrap" style="width:100%; height: 100%; min-height: 500px;">
        <div class="labelWid" style="left: 2px; top: 10px; padding: 2px 3px; height: 100px; background-color: #a7d9f6;">Label</div>
      </div>
    </td>
    <td><div class="tdContent">2</div></td>
    <td><div class="tdContent">3</div></td>
    <td><div class="tdContent">4</div></td>
    <td><div class="tdContent">5</div></td>
    <td><div class="tdContent">6</div></td>
    <td rowspan=1000 style="vertical-align: top;">
      <div class="widgetWrap" style="width:100%; height: 100%; background-color: #bbffd2">
        <div class="labelWid" style="left: 2px; top: 6px; width: 100px; background-color: #a3dc7d;">Label</div>
      </div>
    </td>
  </tr>

  <tr>
    <td><div...

CSS

body {
  font-family: Arial;
}

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }

table {
  border-collapse: collapse;
}

table, td, th {
  border: 1px solid #cecece;
  padding: 0;
}


th {
  padding-top: 20px;
  padding-bottom: 4px;
}

.thContent, .tdContent {
  padding: 2px 3px;
}

.outline {
  outline: 1px solid aqua;
}


.widgetWrap {
  vertical-align: top;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #ffea8e;
}

.labelWid {
  position: absolute;
}