How do I force multiple elements to wrap with each other when the sheet window is resized?

I want the labels associated with my input fields to wrap to the next line along with each other when the character sheet is resized horizontally. Name: <input /> Class: <input />  With the html like this, when the window is shrunk horizontally, the last <input> field wraps down to the next line before it's label "Class:" does, which makes reading it look awkward. Is there some way I can put them in a <span> or <div> and keep them wrapping on the same line with css?

You can put the field inside the label. <label><span>text</span><input type = blahblah/></label> then make the table inline block dont use "label" give it a class Name of course.  Label { Display:inline-block; } Labe Input , label span { Display:inline; }

Oh, I didn't even know there was a <label> tag. I was just using plain text as the labels next to the <input> tags. But putting them in a <span> or a <label> and setting the display with css doesn't seem to work, the elements still wrap to the next line independently. The way you have it doesn't even show up initially how I want it. With <label> set to anything but inline they take up the whole width. I want my <label> tags or <span> tags or whatever is containing my text to display inline along with their <input> tags but when the window is shrunk I want them to wrap along with their associated <input> tags. EDIT: I've solved it, I needed to use: .sheet-label { white-space: nowrap; overflow: hidden; } .sheet-label label { display:inline; } <span class='label'><label>Name: <input /></label></span><span class='label'><label> Class: <input /></label></span>