JSFiddle - React, Tailwind, and code Playground

by medmunds

HTML

<div id="container">
  <div class="stick">
    left
  </div>
  <div class="grow">
    <span>long content long content long content long content</span>
  </div>
  <div class="stick">
    right
  </div>
</div>

CSS

#container {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  width: 100%;
  height: 60px;
  background: #fff;
}
#container > * {
  margin: 0.5em;
}

.grow {
  flex: 1;
  /*min-width: 5em;*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}