JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.container {
        width:100%;
    }
    h2 {
        display:inline;
        min-width:200px;
        overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word;
    }
    button {
        width:100px;
    }