JSFiddle - React, Tailwind, and code Playground

HTML

<div>
      <div class="item">
        short
        <progress />
      </div>
      <div class="item">
        long on long so long yes long very long certainly longer than the default width of a progress
        <progress />
      </div>
    </div>
    <p>
    I want the first progress to be as long as the text "short" is.
    </p>

CSS

.item {
      border: 1px solid gray;
      display: inline-flex;
      flex-direction: column;
    }