How to align a Checkbox and Text on the same line in HTML?

Question

This is the code I currently have. How do I format the checkbox to be right after the word "email" and not on the next line.

<label for="opt">Check this box to subscribe to our monthly newsletter. You can unsubscribe at any time using the link at the bottom of our email.</label>

<input type="checkbox" id="opt" name="opt" value="true" checked>

 <label for="opt">Check this box to subscribe to our monthly newsletter. You can unsubscribe at any time using the link at the bottom of our email.</label> <input type="checkbox" id="opt" name="opt" value="true" checked>

More Code

Answer 1

You might set the display of the label to block. That means it will occupy the whole line for himself. The default display of label tag is inline. You can read about block level and inline tags here .

So you must set the display of your label tag to inline so the check box could come next to the text.

 .first { display: block } .second { display: inline }

 <label class="first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto modi earum laudantium quod facilis ullam eaque reprehenderit, hic autem deserunt dolor ratione animi. Dolor, voluptate!</label> <input type="checkbox"><br/><br/> <label class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto modi earum laudantium quod facilis ullam eaque reprehenderit, hic autem deserunt dolor ratione animi. Dolor, voluptate!</label> <input type="checkbox">