You have four controls on the form. You want the last three to stay as they are, but the first, the text search field, to take up the rest of the space? If so, I think the only way you could do this is to use flexbox. Read more about it here:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I think it is flex-grow that you would need. The search box would be flex-grow: 1; and the other three fields would be flex-grow: 0;

The container (the form) you need to set to display: flex;

I haven’t checked this, but there are a couple of errors:

.searchandfilter[data-sf-form-id=”1216″] > ul
{
display: flex !important;
}

.sf-field-search {
flex-grow: 1 !important;
}

.sf-field-category,
.sf-field-tag,
.sf-field-reset {
flex-grow: 0 !important;
}

.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}

important was spelled wrong, and it is the ul inside the form that needs to be display: flex, not the form itself.

I do not see display: flex on the UL just inside the form, and when I copied the code, the quote marks were the wrong type somehow, so I use the ID instead:

#search-filter-form-1216 > ul
{
display: flex !important;
}

.sf-field-search {
flex-grow: 1 !important;
}

.sf-field-category,
.sf-field-tag,
.sf-field-reset {
flex-grow: 0 !important;
}

.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}

I can see that this nearly works, but the label inside the search li, and the input inside that need to be set to width: 100% also