JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<div id="bpm">
<div>
Some longish text text goes here
</div>
<div>
less long text
</div>
<div>
two words
</div>
<div>
word
</div>
</div>

SCSS

#bpm {
  display: flex;
  width: 100%;
  div {
    border: 1px solid red;
    flex: 1 0;
    height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: no-wrap;
  }
}