JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer">
    <div id="left" class="buttons" style="float:left">
        <a href="">User Name unknown length</a>
        <a href="">Image</a>
    </div>
    
    <div id="flash">
        text appear here, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long.
    </div>
    
    <div id="right" class="buttons" style="float:right">
        <a href="" id="cancel" style="padding:2px 10px 2px 7px;" class="cancel">Image</a>
        <a href="" id="submit" style="padding:2px 10px 2px 7px;" class="submit">Image</a>
    </div>
</div>

CSS

#flash {
    float:left;
    font-size: small;
    font-style: italic;
    text-align: center;
}

JavaScript

$(function () {
    var midWidth = $(document).width() - ($('#left').width() + $('#right').width());
    $('#flash').width(midWidth);
    
    $(window).resize(function() {
        var midWidth = $(document).width() - ($('#left').width() + $('#right').width());
        $('#flash').width(midWidth);
    });
});