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,
            'word-wrap': 'none',
        });
        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);
        
        if (spacing < 0) {
            spacing = 0;
            
            $(full_query).css({
                'word-wrap': 'break-word',
            });
        }
        
        $(full_query).css('letter-spacing', spacing);
    }
    
    $(document).ready(function() {
        dynamicSpacing('#container h1', '#container');
        
        $(window).resize(function() {
            dynamicSpacing('#container h1', '#container');
        });
    });