JSFiddle - React, Tailwind, and code Playground

HTML

<h2>This is an ugly-looking, unbalanced header.</h2>
<h2 id="pretty">This is a pretty-looking, balanced header.</h2>

CSS

h2 {
    width: 350px;
    margin: 50px auto;
    font: 22px Arial, Helvetica, sans-serif;
    text-align: center;
}

JavaScript

balance($('#pretty'));

// "Balance" a jQuery element
function balance($elem) {    
    var originalWidth = $elem.width(),
        originalHeight = $elem.height(),
        currentWidth = originalWidth,
        currentHeight = originalHeight;
    
    // Decrement width until number of lines increases or
    // width becomes 0
    while (currentHeight == originalHeight && currentWidth > 0) {
        $elem.width(currentWidth - 1);
        currentWidth = $elem.width();
        currentHeight = $elem.height();
    }
    
    if (currentWidth == 0) {
        // Reset width
        $elem.width('');
    } else {
        // Restore width so that number of lines is maintained
        $elem.width(currentWidth + 1);
    }
}