JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
  <div class="item">
    <div class="item-title">Title 1</div>
  </div>
  <div class="item">
    <div class="item-title">Title 2</div>
  </div>
  <div class="item">
    <div class="item-title">Some very long title</div>
  </div>
  <div class="item">
    <div class="item-title">Title 3</div>
  </div>  
</div>

CSS

.items {
    display: flex;
    justify-content: space-between;
}

.item {
    flex: 1 0 0;
    border: 1px solid #333;
    background: #fde669;
}

.item-title {
    font-size: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}