Make <div> Elements Act Like A Table With display: table

Heads-Up

This is a work in progress while I figure out how this works. I've seen very little about display: table and the related display properties. Seems they don't get much use. This is really just so I can get a basic idea of how it works

<div class="tbl">
  <div class="tbl-row">
    <div class="tbl-cell">this is come content to mess with </div>
    <div class="tbl-cell">and here is some more things to do with the thing</div>
  </div>
  <div class="tbl-row">
    <div class="tbl-cell">.</div>
    <div class="tbl-cell">some line here</div>
  </div>
</div>
this is come content to mess with
and here is some more things to do with the thing
.
some line here
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}


.tbl {
  display: table;
  width: min(100% - 3rem, 80ch);
  outline: 1px solid yellow;
  > .tbl-row {
    display: table-row;
    outline: 1px solid green;
    > .tbl-cell {
      display: table-cell;
      outline: 1px solid blue;
    }
  }
}