JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="side"></div>
    <div id="middle">One line of text.</div>
    <div class="side"></div>
    <a href="#" id="change-text">Change Text</a>
</div>

CSS

#wrapper {
    margin: 0 auto;
    width: 1000px;    
}

#wrapper div {    
    float: left;   
    height: 300px;    
}

.side {
    background: #ddd;   
}

#middle {
    background: #eee;  
    padding: 0 30px;
    text-align: center;
}

#change-text {
    clear: both;
    margin-top: 20px;  
}

JavaScript

$(function(){
    
    var adjustSize = function(){
        // Declare vars
        var wrapper = $('#wrapper'),
            middle = $('#middle'),
            totalWidth = wrapper.width(),
            middleWidth = middle.width(),
            middleOuterWidth = middle.outerWidth(),
            remainingWidth = totalWidth - middleOuterWidth,
            sideWidth;
        
        if(remainingWidth % 2 === 0){
            // Remaining width is even, divide by two
            sideWidth = remainingWidth/2;
        } else {
            // Remaining width is odd, add 1 to middle to prevent a half pixel
            middle.width(middleWidth+1);
            sideWidth = (remainingWidth-1)/2;  
        }
        
        // Adjust the side width
        $('.side').width(sideWidth);
    }
        
    adjustSize();
    
    //This section is just to demonstrate text of a different width
    $('#change-text').click(function(e){
        e.preventDefault();
        var newText = 'This text is a different width, so run the adjustSize function.';
        $('#middle').text(newText);
        adjustSize();
    });

});