JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
      
      <div class="table-tbody">
        <div class="table-row">
          <div class="table-cell">
            <div class="cell-liner col1">Row 1</div>
          </div>
          <div class="table-cell">
            <div class="cell-liner col2">onto two lines or more?</div>
          </div>
          <div class="table-cell">
            <div class="cell-liner col3">However, run onto more than one line like this and the table breaks in columns 1 and 3</div>
          </div>
        </div>
      </div>
      
      
      <div class="table-tbody">
        <div class="table-row">
          <div class="table-cell">
            <div class="cell-liner col1">Row 2</div>
          </div>
           <div class="table-cell" colspan="2">
            <div class="cell-liner col2">onto two lines or more?</div>
          </div>
        </div>
      </div>
      
     
      <div class="table-tbody">
        <div class="table-row">
          <div class="table-cell" colspan="3">
            <div class="cell-liner col1">Row 3</div>
          </div>
        </div>
      </div>
    </div>

CSS

.table {
        display: table;
        border-collapse: collapse; 
        width: 474px;
      }
      
      .table .table-tbody {
        display: table-row-group;
        page-break-inside: avoid;
      }
      
      .table .table-row {
        display: table-row;
      }
      
      .table .table-cell {
        padding: 0 10px;
        border: 1px solid #000;
        display: table-cell;
      }
      
      .table .table-cell[colSpan] {
        width: 100%;
        -webkit-column-span: all;
      }
        
      .table .col1 {
        width: 111px;
      }

      .table .col2 {
        width: 187px;
      }
	
      .table .col3 {
        width: 112px;
      }