Fix label for the first checkbox is down

Hello,
Why in this example https://jsfiddle.net/8fxLrgz5/2/
label for the first checkbox is down of the checkbox and how to fix it ?

 

You need to fix the width between them. The label has no place to go but down.

 

Sorry, I did not undertstand your hint. please more details

 

Wasn't a hint on his part. The (derp) col-3 rubbish from bootcrap style site-building methodology makes each of those sub-columns a fixed width. Those fixed widths are too wide for the label to fit next to your checkbox (well, garbage bloated faux-checks) so of course it breaks down. It's word-wrapping like any other content in HTML would as each of those columns HAS to remain 1/3rd width.

You might want to back up a bit, kick the mentally enfeebled train wreck laundry list of how NOT to build websites that is bootcrap to the curb, and take the time to learn how to use HTML and CSS without that idiotic trash -- no matter how many mouth-breathers will blindly sing the praises of all things "bootstrap". You're only learning to write bloated, non-semantic, rubbish HTML... much less failing to learn the most basic concepts of what HTML and CSS are, why they are separate from each-other, or how to use either efficiently.

I mean... endless pointless classes for nothing, presentational use of classes with static style in the markup to the point you might as well go back to using HTML 3.2, no names to be sent server-side. That's a mess.

As evidenced by the junk markup you're stuck with there which has little if any business being anything more than:

<fieldset class="describeWhatTheseAreNotWhatTheyLookLike">
	<legend>Describe what they're choosing!</legend>
	<!-- above legend could also be a appropriate depth heading -->
	<div>
		<input
			type="checkbox"
			id="cbx_facility_35"
			name="nameSentToServer[]"
			value="1"
		>
		<span></span>
		<label for="cbx_facility_35">Washing Machines with What?</label>
	</div><div>
		<input
			type="checkbox"
			id="cbx_facility_35"
			name="nameSentToServer[]"
			value="2"
		>
		<span></span>
		<label for="cbx_facility_34">Cars with long WHAT?</label>
	</div><div>
		<input
			type="checkbox"
			id="cbx_facility_32"
			name="nameSentToServer[]
			value="3"
		>
		<span></span>
		<label for="cbx_facility_32">Products with long labels</label>
	</div>
</fieldset>

Code (markup):

Write your semantic markup with ZERO concern about what it's going to look like FIRST. Then apply any div/span for the hooking of style without saying what that style IS. Anything else, such as halfwitted dipshittery like "col-3" or "xm-s-4" or "text-centered' needs to be told to bugger off. As it's proof the people who created bootstrap are unqualified to even write a single line of HTML or CSS, much less be telling others how to do so!