JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex">
  <div class="table">
    TABLE
    <div class="caption">
      CAPTION
    </div>
  </div>
  <div class="block">
     BLOCK
  </div>
</div>

If we're honoring the percent width on the table when computing the used flex basis, then the colorful bordered boxes above will have the same width and will be non-overlapping. (This is probably what authors want, but it goes against the letter of the spec.)

CSS

body { background: white; }
.flex {
  display: flex;
  border: 1px solid black;
  width: 400px;
  font: 14px monospace;
}

.table {
  display: table;
  width: 30%;
  border: 2px solid teal;
}

.caption {
  display: table-caption;
}
.block {
  display: block;
  width: 30%;
  border: 3px solid purple;
}