Twitter's Bootstrap has some excellent design ideas for form elements: http://getbootstrap.com/components/#input-groups

"How do they do it?!" you may ask...well, I'm sure you will be disappointed by this rather simple answer - display: table-cell; That's it. I can see you all cringing, but the truth is that it works very well and is cross-browser! I am yet to find a more cross-browser solution, or at least one that is supported by IE 7, 8 and 9.

So what about flexbox? Flexbox is my alternative to Bootstrap's solution. Support for flexbox is still a bit wishy washy, but I was able to get this working pretty easily in all the major browsers (note that flexbox is only supported in IE10+). For a much more in depth description of flexbox read this blog post from 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;
}

And that's all there is to it! Here is my solution below, with some extra css for styling.

If anyone else has another idea or improvement on how to approach this, please leave a comment below.