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

html

Solution

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/

Problem

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 ```

Original source