JSFiddle - React, Tailwind, and code Playground

by J W

HTML

<div class="outer">
<div class="table">
  <div class="row">
    <div class="cell">Hello there my name is long</div>
    <div class="cell">dir</div>
    <div class="cell">encyclopediaencyclopedia</div>
    <div class="cell">people are friendly</div>
  </div>
  <div class="row">
    <div class="cell">people are nice</div>
    <div class="cell">directory</div>
    <div class="cell">en</div>
    <div class="cell"><div class="wide">Hello there my name is long</div></div>
  </div>
</div>
</div>

CSS

/* For https://stackoverflow.com/questions/7569436 */

.outer {
  width: 300px;
  overflow: auto;
}
.table {
  display: table;
  border: 1px solid grey;  
}

.row {
  display: table-row;
}
.cell {
  display: table-cell;
  /* For compatibility with pre-80 Chrome and pre-65 Firefox, we use legacy values instead of `overflow-wrap: anywhere`.
     `word-break: break-word` can be used for Chrome 4+ and Firefox 67+, with `word-break: break-all` as a fallback. */
  word-break: break-all;
  word-break: break-word;
  border: 1px solid grey;
}