JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div>
    This containing box resizes according to the amount of text in it, up to a maximum width. The round borders stay nice when the box is taller because the radius used is much bigger.
  </div>
</div>

<div class="outer">
  <div>
    This has few words and the box is smaller.
  </div>
</div>

<div class="outer">
  <div>
    This box has just as much text in it as the next one, but the next one should be narrower.
  </div>
</div>

<div class="outer bad">
  <div>
    This part of this sentence can wrap, but <span class="test">not this part, which must stay together.</span>
  </div>
</div>

CSS

.outer {
  text-align: center;
}

.outer div {
  max-width: 400px;
  border: #d89648 4px solid;
  color: #D97A23;
  border-radius: 999px;
  padding: 10px 30px 12px 30px;
  margin: 0 auto 15px auto;
  display: inline-block;
}

.test {
  white-space: nowrap;
}
.bad {
  max-width:400px;
  margin:auto;
}
.bad div {
  border-color: red;
  display:table;
  width:0;
}