JSFiddle - React, Tailwind, and code Playground

HTML

<div class="infinite-cb">
  <div class="floated-table">
    table
    <div class="caption">
      Caption
    </div>
  </div>
</div>

CSS

body { background: white; }
.infinite-cb {
  /* OK, not infinite, but huge. */
  width: 10000px;
}

.floated-table {
  float: left;
  display: table;
  /* This "width" targets the _table box_.  The table wrapper box has width:auto. */
  width: 100%;
  border: 1px solid orange;
}

.caption {
  display: table-caption;
  border: 1px solid purple;
}