css-header

Front-end: Maquetar un buscador (input + botón) para que sea 100% fluido / responsive

La idea detrás de esto fue lograr que el buscador esté siempre al 100% del espacio que tenga disponible y no tener que preocuparme de dimensionar los input para que encajen y que el botón no caiga a dos lineas cuando se queda sin espacio.

Pueden ver como funciona si re dimensionan la ventana del navegador:

See the Pen vJBnL by Marcelo Tosco (@capynet) on CodePen.