JSFiddle - React, Tailwind, and code Playground

by Csaba Hellinger

HTML

<div class="flex">
  <span>Hello</span>
  <span>World!</span>
  <span>Foo</span>
  <span>and</span>
  <span>Bar!</span>
  <span>The</span>
  <span>End.</span>
</div>

CSS

.flex {
  display: flex;
  font-size: 20px;
  background: pink;
  --max-height: 20px;
  --flex-wrap: wrap;
  max-width: 100%;
  flex-flow: row wrap;
  max-height: 1em;
  overflow: hidden;
}

.flex span {
  margin-right: 0.3em;
  background: orange;
  flex-grow: 0;
  flex-shrink: 1;
}

.flex span:last-child {
  background: red;
}