JSFiddle - React, Tailwind, and code Playground

by Jayson Buquia

HTML

<table>
  <tbody>
    <tr>
      <td>cell 101</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>slightly long content</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
</table>

<div class="table">
  <div class="tbody">
    <div class="tr">
      <div class="td">Label 2 B</div>
      <div class="td">Value</div>
    </div>
    <div class="tr">
      <div class="td">Label</div>
      <div class="td">Value</div>
    </div>
    <div class="tr">
      <div class="td">Label</div>
      <div class="td">Value slightly long</div>
    </div>
    <div class="tr">
      <div class="td">Label</div>
      <div class="td">Value</div>
    </div>
    <div class="tr">
      <div class="td">Label</div>
      <div class="td">Value</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">Label 2 B</div>
      <div class="td">Value</div>
    </div>
    <div class="tr">
      <div class="td">Label</div>
      <div class="td">Value</div>
    </div>
    <div class="tr">
      <div class="td">Label</div>
      <div class="td">Value slightly long</div>
    </div>
    <div class="tr">
      <div class="td">Label</div>
      <div class="td">Value</div>
    </div>
  </div>
</div>

SCSS

table,
.table {
  display: flex;
  width: 80%;
  background-color: rgba(teal, .3);
  margin-bottom: 2px;
}

tbody,
.tbody {
  width: 50%;
  
  &:first-of-type {
     background-color: rgba(yellow, .2);
  }
}

tr,
.tr {
  display: table-row;
}

td,
.td {
  padding: 5px 10px;
  display: table-cell;
  
  &:first-child {
     white-space: nowrap;
  }
}