JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <h1>Sample</h1>
    <p>Another even longer sample text</p>
</div>

CSS

body {
    padding: 100px;
}

#container {
    width: 100%;
    background: yellow;
}

JavaScript

function dynamicSpacing(full_query, parent_element) {
    $(full_query).css('letter-spacing', 0);
    var content = $(full_query).html();
    var original = content;
    content = content.replace(/(\w|\s)/g, '<span>$1</span>');
    $(full_query).html(content);
    
    var letter_width = 0;
    var letters_count = 0;
    $(full_query + ' span').each(function() {
        letter_width += $(this).width();
        letters_count++;
    });
    
    var h1_width = $(parent_element).width();
    
    var spacing = (h1_width - letter_width) / (letters_count - 1);
    
    $(full_query).html(original);
    $(full_query).css('letter-spacing', spacing);
}

$(document).ready(function() {
    dynamicSpacing('#container h1', '#container');
    
    $(window).resize(function() {
        dynamicSpacing('#container h1', '#container');
    });
});