JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span class="span1">test</span>
  <span class="span2">test test test test test</span>
</div>

CSS

div {
  display: inline-flex;
  background-color: lightgray;
}

.span1 {
  flex: 0 0 100px;
  /* width: 100px; <-- works fine */
}

.span2 {
  white-space: nowrap;
}