How to align two inline-block elements left and right on same line with CSS?

Spread the love

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.

Leave a Reply

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