JSFiddle - React, Tailwind, and code Playground

by Alvin Olavarrieta

HTML

<div class="container">
  <div class="cell1">
    <div class="wrap">
      <h2>This is the header that should never wrap and elipse if it doesn't fit</h2>
    </div>
  </div>
  <div class="cell2">
    <button>Button</button>
  </div>
</div>
<div class="container">
  <h2>Header</h2>
  <button>Button</button>
</div>

CSS

.container {
    width:100%;
    display: table;
    table-layout: fixed;
}
.container > div {
    display: table-cell;
}
.cell1 {  }
.wrap { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word; }
.cell2 { width: 60%; }

h2 {
    display:inline;
    min-width:200px;

}
button {
    width:100px;
}