JSFiddle - React, Tailwind, and code Playground

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;
}