Keeping wrapped elements together

Question

I have several elements in HTML that I want to keep grouped when they wrap. I think the answer lies with some CSS (or maybe even JavaScript), but I'm not sure. For example, I have several elements laid out like this:

<label A><input A><label B><input B><label C><input C>

What happens is the users sometimes resize the browser window, and we end up with this:

<label A><input A><label B>
<input B><label C><input C>

In the example above, the input B isn't next to its input element. Is there a way to group the label and the input so they wrap together? I've tried divs and putting the elements together in a table with "nowrap", with mixed results. I don't mind the lines wrapping, I just need to keep the label and input element together.

Answer 1

Try something like this:

<label>First Name:
    <input type="text">
</label>
<label>Last Name:
    <input type="text">
</label>

and set

label {
    display: inline-block;
}

Demo http://dabblet.com/gist/3145028

Alternative: wrap both <label> and <input> in a <div> with display: inline-block