How to get a fixed width button with an input field taking the rest of the available space fluidly

Question

Is it possible in CSS only to accomplish to get a input field and button vertically aligned like in my pen:

http://codepen.io/rpkoller/pen/BhKbp/

and then manage that the button aligned to the right has a fixed width and margin to the left to the input field and that the input field is filling the rest of the space fluidly.

Getting the button to the right might work with a float but with that solution the button isn't vertical aligned in the middle anymore. :( and getting the input field fill the remaining space i haven't managed at all. :/

Best regards Ralf

Answer 1

You can use specifity of floatting element and layout of block elements .

<button> first in the flow, floatting before a block wrapping the input. wrapper at overflow:hidden and <input/> at width:100%;.

see test : http://codepen.io/anon/pen/Hdiyq