Search code examples
htmlcssalignmentfrontendforms

Align a checkbox input and a <p> tag in the same line

I've seen most of the other solutions to this problem using a label. Unfortunately, I can't use label on this particular case, because that will mess things up. What I have is the following:

<div className="terms-checkbox">
  <input type="checkbox" required />
  <p>I accept the Terms and Conditions</p>
</div>

And I'm setting display to be inline-block for terms-checkbox like so:

    .terms-checkbox {
      display: inline-block;
    }

However, this does not align the items horizontally/in the same line. Without wrapping the input tag with label, how can I make the checkbox and p tag align horizontally?

Here's the fiddle link: https://jsfiddle.net/eu5rso2a/1/

edit: fixed indentation.

Solution

  • You must set the terms-checkbox class to input or p tag. Not their parent. Means your input and p tag must be inline-block