JSFiddle - React, Tailwind, and code Playground

by mnk

HTML

<div class="container">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>
<br>
<div class="container">
  <div class="one">one</div>
  <div class="two">
    <p>two asjdha jskdaskj dhask jdhakjs hdakjsdhkajs dhaksj dhaksj dhaskj dhaskj dahskjd ahjdahd asd asd as dasd as dasd</p>
  </div>
  <div class="three">three</div>
</div>

SCSS

div {
  padding: 10px;
}
.container {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  .one {
    min-width: 50px;
    background-color: #ddd;
  }
  .two {
    flex: 1;
    background-color: #ccc;
    width: 0;

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .three {
    min-width: 100px;
    text-align: right;
    background-color: #bbb;
  }
}