JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <input id="textfield" type="text">
        <button id="btn"> <span>Auswählen</span>
            
        </button>
</div>

CSS

.wrapper {
    width:100% display: table;
}
input {
    display: table-cell;
    width: 100%; float: left;
}
button {
    display: table-cell;
    width: auto;
}

JavaScript

function getRemainingWidth(button, elm) {
    elm.style.width = "calc( 100vw - " + realWidth(button) + "px)";
    alert(elm.style.width);
}

window.onload = getRemainingWidth(document.getElementById('btn'), document.getElementById('textfield'));
parseInt(a, 10);
function realWidth(elm) {
    var width = elm.offsetWidth + 
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('padding-left'), 10) +
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('padding-right'), 10) + 
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('margin-left'), 10) + 
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('margin-right'), 10);
    
    return width + 10;
}