CSS position two elements left and right

Introduction

Hey guys.
In this tutorial we are going to position two elements, one on the left, and the other on the right in the same row using the CSS flexbox layout.
You will see how easy it is by using just a few lines of css code.

In the example below, we have in the same row and on the left side some text describing a product category, and on the right side we have a button.
This is a common layout that we see on many websites.

Let's see how we do this.

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

Buy me a coffee with paypal