I've come across various solutions for this issue that involve using a label. Unfortunately, in this specific case, I am unable to utilize a label as it would cause complications. The current setup is as follows:
<div className="terms-checkbox">
<input type="checkbox" required />
<p>I accept the Terms and Conditions</p>
</div>
I have applied inline-block display to terms-checkbox like this:
.terms-checkbox {
display: inline-block;
}
However, the items are still not aligning horizontally/in the same line. Without wrapping the input tag with label, how can I ensure that the checkbox and p tag align horizontally?
For reference, here is the link to the fiddle: https://jsfiddle.net/eu5rso2a/1/
Edit: Indentation has been fixed.