JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<div class="table">
  <div class="row">
    <div class="td">
      Weeeeeeeeeeee
    </div>
    <div class="td">
      Weeeeeeeeeeee
      <br> Weeeeeeeeeeee
    </div>
    <div class="td">
      Weeeeeeeeee
    </div>
  </div>

  <div class="row">
    <div class="td">
      Weeeeeeeeeeee
    </div>
    <div class="td">
      Weeeeeeeeeeee
    </div>
    <div class="td">
      Weeeeeeeeeeee
      <br> Weeeeeeeeeeee
    </div>
  </div>
</div>

CSS

.table {
  width: 100%;
  display: table;
  text-align: center;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

.row {
  display: table-row;
}

.td {
  border-top: 1px solid #000;
  display: table-cell;
  vertical-align: middle;
  border-right: 1px solid #000;
}

.td:last-child {
  border-right: none;
}