Сохранение адаптированной ширины кнопки ввода + в наборе полей

Question

Я разработал некоторые входы с помощью кнопки внутри набора полей, и это было хорошей идеей, когда я работал с фиксированной шириной. Например, ширина ввода 205pxкнопка отправки 40px ширина с помощью padding, display:block а также position:absolute,

Но теперь я использую эти входные данные в разных макетах, например в нижнем колонтитуле, с 1, 2, 3 или 4 столбцами, и я хочу, чтобы ширина ввода адаптировалась к получению полной ширины контейнера набора полей, кроме ширины кнопки отправки,

И это структура HTML:

<fieldset class="fieldset">
    <input type="text" class="field" name="s" placeholder="Buscar">
    <span>
        <input value="" type="submit">
    </span>
</fieldset>

Я вставляю иконку с помощью псевдо-селектора :before в <span>, Таким образом, CSS кнопки отправки выглядит так:

#widget_ID input[type="submit"]{
width: 100%;
height: 100%;
display: block;
border: 0;
outline: 0;
position: absolute;
left: 0;
top: 0;
background-color: transparent;
}

Я планировал решить это с помощью calc(100% - 40px) в CSS3, но я не уверен в этом, потому что валидатор w3c содержит ошибку в этом синтаксисе, и я делаю продукт, одной из функций которого является допустимость HTML5 и CSS3.

Таким образом, другое решение будет использовать jQuery. Вы бы использовали Javascript для этого? Это чрезмерно? Это было бы что-то вроде этого кода:

$(document).ready(function(){

    $(window).on('resize', function(){      

        var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
        var inputWidth = $('#widget_ID fieldset').width() - 40;

            $('#widget_ID fieldset input').css('width', inputWidth + 'px');

    }).resize();

});

Чтобы ты делал? Заранее спасибо:)