O Bootstrap do Twitter tem algumas ideias de design excelentes para elementos de formulário: http://getbootstrap.com/components/#input-groups

“Como eles fazem isso?!” você pode perguntar … bem, tenho certeza que você ficará desapontado com esta resposta bastante simples – display: table-cell; É isso aí. Eu posso ver todos vocês se encolhendo, mas a verdade é que funciona muito bem e é cross-browser! Ainda estou para encontrar uma solução mais para vários navegadores, ou pelo menos uma que seja compatível com o IE 7, 8 e 9.

E quanto ao flexbox? Flexbox é minha alternativa à solução do Bootstrap. O suporte para flexbox ainda é um pouco insosso, mas consegui fazê-lo funcionar facilmente em todos os principais navegadores (observe que o flexbox só é compatível com o IE10 +). Para uma descrição muito mais detalhada do flexbox, leia esta postagem do blog de csstricks: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

HTML

<div class="input-group">
    <label>The label</label>
    <input type="text" />
</div>

CSS

div.input-group {
    display: flex;
}

label {
    white-space: nowrap;
}

input {
    display: inline-block; // for safari
    flex: 1;
}

E isso é tudo que há para fazer! Aqui está minha solução abaixo, com alguns css extras para estilização.

Se alguém tiver outra ideia ou melhoria em como abordar isso, deixe um comentário abaixo.