Input fill the remaining space

Question

I have that code:

<form class="choose-game" action="?" method="get">
    <fieldset>
        <select name="game" id="game" required>
            <option value="battlefield 4">Battlefield 4</option>
            <option value="call of duty ghosts">Call Of Duty: Ghosts</option>
            <option value="fifa 2014">FIFA 2014</option>
            <option value="league of legends">League of Legends</option>
            <option value="need for speed rivals">Need For Speed: Rivals</option>
        </select>
        <input type="submit" value="Wybierz">
    </fieldset>
</form>

JSFiddle, but I want to input fill the remaining space in fieldset (except interstice). Any other one solution from StackOverflow doesn't work. What I must to do?

Are you looking for something like [this](http://stackoverflow.com/a/19022840/1542290)? — Mr. Alien, Apr 18 '14 at 17:16
Yes, but I can't modify my code into that. Maybe it can't work by the fact that in my fill with this is on the left. — Albert221, Apr 18 '14 at 17:30
https://stackoverflow.com/questions/37883998/css-stretch-textbox-to-fill-remaining-space should be helpful. — eqrakhattak, Mar 08 '21 at 10:29

score 0 · Accepted Answer · answered Apr 18 '14 at 17:58

If you are okay with setting the width of the select box to a percentage you can then have the input fill the remaining width. You will also have to float the input and select to the left.

Try modifying the .choose-game select and input properties like this

.choose-game select { width:20%; float:left }

.choose-game input[type="submit"] { 
    background-color: #3498db; color: #fff; cursor:   pointer; width:80%; float:left;
}

Input fill the remaining space

1 Answers1