CSS position two elements left and right

The html code

The html code is very simple.
We have a div element with a class of "container" that holds inside a paragraph and a button.

<div class="container">
	<p>Products - Laptops</p>
	<button>Show All</button>
</div>

The CSS code

Let's see the css code.

.container{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

• In line 2 we are setting the display property to flex. This will position the elements inside the div next to each other.
• Next in line 3 we use the align-items property and set it's value to center. This will center the two elements vertically. This shows only if we add height to the container element.
• And last in line 4 we use the justify-content property and set it's value to space-between.
  This will put all the available space between the two elements, having the result we want.
• And that's it, simple and easy we have positioned the two elements left and right inside the container.

Summary

We saw how to position two elements left and right using the flex system.

Thanks for reading, i hope you find the article helpful.
Please leave a comment if you find any error's, so i can update the page with the correct code.

Buy me a coffee