JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div>
    Button 1
  </div>
  <div class="fill">
    <div class="lockText">
      A one-lined text that is too long and has to be
      A one-lined text that is too long and has to be
      A one-lined text that is too long and has to be
      A one-lined text that is too long and has to be
      A one-lined text that is too long and has to be
      A one-lined text that is too long and has to be
      A one-lined text that is too long and has to be
    </div>
  </div>
  <div>
    Button 2
  </div>
</div>

CSS

.container {
  display: table;
  width: 100%;
}

.container > div {
  display: table-cell;
  white-space: nowrap;
  position : relative;
  width : auto;
  
  /*make it easier to see what's going on*/
  padding : 2px;
  border : 1px solid gray;
}

.container > .fill {
  width : 100%;
}

.lockText {
  position : absolute;
  left : 0;
  right : 0;
  overflow: hidden;
  text-overflow: ellipsis;
}