How to make label and input appear on the same line on an HTML form?

Spread the love

Sometimes, we want to make label and input appear on the same line on an HTML form.

In this article, we’ll look at how to make label and input appear on the same line on an HTML form.

How to make label and input appear on the same line on an HTML form?

To make label and input appear on the same line on an HTML form, we use flexbox.

For instance, we write

<div class="form-group" style="display: flex">
  <label>Comment:</label>
  <input class="form-control" type="checkbox" />
</div>

to make the div a flex container with display: flex.

Then the label and input will appear side by side.

Conclusion

To make label and input appear on the same line on an HTML form, we use flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *