JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contain">
<div id="left">1</div><div id="filler">3</div><div id="right">2</div>
</div>

CSS

#left {
    text-decoration: none;
    display: inline-block;
    padding: 0px 20px 0px 20px;
    height: 45px;
    margin: 0px;
    text-align: center;
    line-height: 300%;
    background: #FF9000;
    color: #FFFFFF;
}
#filler {
    display: inline-block;
    width: auto;
    height: 45px;
    line-height: 300%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    background: #00FF90;
}
#right {
    text-decoration: none;
    display: inline-block;
    width: auto;
    padding: 0px 20px 0px 20px;
    height: 45px;
    text-align: center;
    line-height: 300%;
    background: #FF9000;
    color: #FFFFFF;
    margin: 0px;
}
#contain {
    width: 100%;
	height: 45px;
    padding: 0;
	margin: 0;
}

JavaScript

$('#filler').outerWidth($('#contain').width()-$('#right').outerWidth()-$('#left').outerWidth());