How to force a checkbox and text on the same line?

Question

How can I force a checkbox and following text to appear on the same line? In the following HTML, I'd only want the line to break between label and input, not between input and label.

<p><fieldset>     <input type="checkbox" id="a">     <label for="a">a</label>     <input type="checkbox" id="b">     <!-- depending on width, a linebreak can occur here. -->     <label for="b">b</label>     <input type="checkbox" id="c">     <label for="c">c</label> </fieldset></p> 

To clarify: if the fieldset/p is not wide enough for all elements, instead of:

[] a [] b [] c [] d [] e 

I want:

[] a [] b [] c [] d [] e 

Answer 1

It wont break if you wrap each item in a div. Check out my fiddle with the link below. I made the width of the fieldset 125px and made each item 50px wide. You'll see the label and checkbox remain side by side on a new line and don't break.

<fieldset> <div class="item">     <input type="checkbox" id="a">     <label for="a">a</label> </div> <div class="item">    <input type="checkbox" id="b"> <!-- depending on width, a linebreak can occur here. -->     <label for="b">bgf bh fhg fdg hg dg gfh dfgh</label> </div> <div class="item">     <input type="checkbox" id="c">     <label for="c">c</label> </div> </fieldset> 

http://jsfiddle.net/t5dwp7pg/1/