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.
