JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span>some text some text</span>
    <input type="text" />
    <span>some text some text.</span>
</div>

CSS

div {
    width: 700px;
    background: #ccc;
}

span, input{
    float: left;
}

/*for the parent to adjust to content size */
div:after { 
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

JavaScript

var totalWidth = $('div').width();
var spanWidth = 0;
var inputBorderWidth = 4;

$('span').each(function(){
   spanWidth = spanWidth  + $(this).width(); 
});

$('input').css('width', totalWidth - spanWidth - inputBorderWidth);