Sometimes, we want to align two inline-block elements left and right on same line with CSS.
In this article, we’ll look at how to align two inline-block elements left and right on same line with CSS.
How to align two inline-block elements left and right on same line with CSS?
To align two inline-block elements left and right on same line with CSS, we use flexbox.
For instance, we write
<header>
<h1>Title</h1>
<nav>
<a>A Link</a>
<a>Another Link</a>
<a>A Third Link</a>
</nav>
</header>
to add some elements
Then we write
header {
display: flex;
justify-content: space-between;
}
to make the header a flex container with display: flex;.
This will make the child elements display side by side.
Then we use justify-content: space-between; to spread the child elements along the width of the header element.
Conclusion
To align two inline-block elements left and right on same line with CSS, we use flexbox.
