JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container container-1">
  <div class="fixed">
    left
  </div>
  <div class="container container-2">
    <div class="content">
      words words words words words words words
    </div>
    <button class="fixed">
      right
    </button>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  align-items: center;
}

.container-1 {
  border: 3px solid orange;
}

.container-2 {
  border: 3px solid green;
  flex: 1 1 0;
}

.content {
  flex: 1 1 0;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixed {
  flex: 0 0 50px;
  border: 3px solid brown;
}