JSFiddle - React, Tailwind, and code Playground

HTML

<button>Balance!</button>

<h2>This is an ugly-looking unbalanced header.</h2>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>

<h2>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae 
</h2>

CSS

h2 {
  width: 400px;
  margin: auto;
  text-align: center;
  font: 20px verdana;
  margin-bottom: 1em;
}

JavaScript

$('button').click(function() {
  balance($('h2'));
});

function balance(el) {
  el.each(function() {
    var temp= $('<br><span>'+$(this).html()+'</span>').appendTo(this),
        sp= $(this).find('span')[0],
        num= sp.getClientRects().length;
      
    for(var w=$(this).width(), i=10, best=10, delta=9999 ; i <= w ; i++) {
      $(this).width(i);
      
      var cr=sp.getClientRects();
      if(cr.length > num) continue;
          
      for(var min=9999, max=0, j=0 ; j < cr.length; j++) {
        min= Math.min(min, cr[j].width);
        max= Math.max(max, cr[j].width);
      }
      if(max-min < delta) {
        delta= max-min;
        best= i;
      }
    }
    $(this).width(best);
    temp.remove();
  });
};