JSFiddle - React, Tailwind, and code Playground

by Mayank Khanna

HTML

<div class="outerWrapper">
  <div class="first">
    Life of pie
  </div>
  <div class="secondthird">
  <div class="second">
    This is a very long text needs to have dot dot
  </div>
  <div class="third">
    Chevron
  </div>
   </div>
</div>

CSS

.outerWrapper{
  display: flex;
  width: 300px;
  border: 1px solid black;
  padding: 10px;
  justify-content: space-between;
}

.secondthird{
  display: flex;
  width: 60%;
}

.first{
  white-space: nowrap;
  margin-right: 8px;
}

.second{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.third{
  margin-left: 8px;
}