JSFiddle - React, Tailwind, and code Playground

by Soviut

HTML

<div class="container">
  <div class="parent">
    <div>oneoneoneoneoneone</div><div>twotwotwotwotwotwo</div>
    <div>
      threethreethreethreethreethreethreethree
    </div>
  </div>
</div>

CSS

.container {
  display: flex;
  width: 50%;
  background: red;
}

.parent {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parent > * {
  display: inline;
  margin-right: 0.3rem;
}