Tengo el siguiente código de una barra de búsqueda, al momento de posicionar los elementos, el input que funciona como busqueda aparece más grande que los demás, posicionándose arriba y expandiéndose conforme se escribe.
¿Cómo podría justificar el elemento búsqueda para que solo ocupe el espacio disponible después de los select?
Esto sin afectar el espacio del texto en los select y el boton de buscar.
.card { width:75%; height:35px; margin: 0 auto; padding-left: 10px; background-color:#fafafa; background-position: 8px 8px; background-repeat: no-repeat; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 2px; } .card-options{ display: inline-block; margin: 0 auto; width:100%; height:100%; } input#busqueda{ border: none; padding: 0 0 0 10px; margin: 0px; height: 35px; width: 40%; position: absolute; z-index: 1; background-color: transparent; outline-color: transparent; border-radius: 2px; font-size: 17px; } select.mdl-textfield__input{ margin-top:4px; display: inline-block; width:120px; outline-color: transparent; }<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <div class="card"> <div class="card-options"> <select id="grupos" class="mdl-textfield__input"> <option value="Grupo" name="grupo">Grupo</option> </select> <select id="marcas" class="mdl-textfield__input"> <option value="Marca" name="marca">Marca</option> </select> <input id="busqueda" placeholder="Escriba su busqueda" type="text" name="busqueda"/> <input id="buscar" type="submit" style="float:right;" value="Buscar" class="mdl-button mdl-button--colored mdl-button--raised mdl-js-button mdl-js-ripple-effect"/> </div> </div>
