How to align two elements on the same line without changing HTML with CSS?

Spread the love

Sometimes, we want to align two elements on the same line without changing HTML with CSS.

In this article, we’ll look at how to align two elements on the same line without changing HTML with CSS.

How to align two elements on the same line without changing HTML with CSS?

To align two elements on the same line without changing HTML with CSS, we use flexbox.

For instance, we write

<div>
  <p>Item one</p>
  <a>Item two</a>
</div>

to a div with some elements inside.

Then we write

div {
  display: flex;
  justify-content: space-between;
}

to make the div a flex container with display: flex; to make the elements display side by side.

And we use justify-content: space-between; to spead the elements inside it to the edges.

Conclusion

To align two elements on the same line without changing HTML with CSS, we use flexbox.

Leave a Reply

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