How to avoid a line break (wrap) between two inline elements

Question

I want to use a large number of checkboxes with labels, therefore they won't be displayed below each other, but float like ordinary text. What I have tried so far is this:

<input type='checkbox' name='one' id='one' value='one'/><label for='one'>one</label>
|| <input type='checkbox' name='two' id='two' value='two'/><label for='two'>two</label>
|| <input type='checkbox' name='three' id='three' value='three'/><label for='three'>three</label>
|| <input type='checkbox' name='four' id='four' value='four'/><label for='four'>four</label>
|| <input type='checkbox' name='five' id='five' value='five'/><label for='five'>five</label>

The actual number of checkboxes and labels is much higher, three or four lines long, depending on the size of the browser window.

Unfortunately, depending on the size of the browser window, a line wrap between the input (checkbox) and the label element may appear, although there is no space between them. This doesn't look nice, because the square box and the following text belong together and should not be on separate lines.

I tried to pack both of them in a span element, even with all kinds of attributes and even CSS, but nothing seems to help.

Answer 1

Make the input inside the label and consider white-space:nowrap.

^{I am using the same ID/name to make a fast copy past and to simply demonstrate the trick}

label {
  white-space:nowrap;
}

<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
||