Make "div" Elements Act Like A Table With display: table

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

this is come content to mess with

and here is some more things to do with the thing

some line here

CSS

*, *::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;
    }
  }
}

-- end of line --