Align text next to checkbox

Question

A simple question, and, undoubtedly, an easy solution. I just have a lot of problems with the search, despite the fact that you have been looking for SO and Google for a while.

All I want to do is take a piece of text “I'm interested in an extended listing or premium profile (a member of our team will respond promptly to further information)” and align it to the right (with text aligning to the left), but not wrap around it , like now.

Here is my JSFiddle

Code (using PureCSS for styling):

<form class="pure-form pure-form-aligned"> <fieldset> <div class="pure-control-group"> <label for="name">Product Name</label> <input id="name" type="text" placeholder="Username"> </div> <div class="pure-control-group"> <label for="password">Contact Name</label> <input id="password" type="text" placeholder="Password"> </div> <div class="pure-control-group"> <label for="email">Contact Email</label> <input id="email" type="email" placeholder="Email Address"> </div> <div class="pure-control-group"> <label for="foo">Website</label> <input id="foo" type="text" placeholder="Enter something here..."> </div> <div class="pure-control-group"> <label for="foo">Description:</label> <textarea id="description" type="text" placeholder="Enter description here..."></textarea> </div> <div class="pure-controls"> <label for="cb" class="pure-checkbox"> <input id="cb" type="checkbox"> I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information) </label> <button type="submit" class="pure-button pure-button-primary">Submit</button> </div> </fieldset> </form> 

Any help would be greatly appreciated. Thank you

Answer 1

Here is an easy way. Perhaps there are others.

 <input id="cb" type="checkbox" style="float: left; margin-top: 5px;>"> <div style="margin-left: 25px;"> I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information) </div> 

I used a div to “lock” the text structure and move it to the right. float: left on input holds the checkbox to the left of the text (no higher). margin-top to input changes the top alignment with the text.

fiddle

Answer 2

Try to check the box on the left, and then wrap the text in a div with "overflow: hidden;". Perhaps add a few extras, as I did below, to give text from the room with a breather (perhaps an addition).

 <div class="pure-controls"> <label for="cb" class="pure-checkbox"> <input id="cb" type="checkbox" style="float: left;"> <div style="overflow: hidden; padding: 0px 0px 0px 5px;"> I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information) </div> </label> <button type="submit" class="pure-button pure-button-primary">Submit</button> </div> 

Answer 3

This is the method I used. It worked better for me than many other methods that I found on SO.

 LABEL.indented-checkbox-text { margin-left: 2em; display: block; position: relative; margin-top: -1.4em; /* make this margin match whatever your line-height is */ line-height: 1.4em; /* can be set here, or elsewehere */ } 

 <input id="myinput" type="checkbox" /> <label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>