In modern web design, it’s common to position two elements on opposite sides of a container — for example, a logo on the left and a navigation menu or button on the right. Using Tailwind CSS, you can achieve this layout quickly and cleanly using utility-first classes.
In this blog post, you’ll learn how to align two elements to the left and right within the same container using Tailwind CSS, along with multiple layout techniques.
✅ Method 1: Flexbox with justify-between
The most straightforward and effective method in Tailwind is to use Flexbox with justify-between, which places one item on the left and the other on the right.
✅ Example:
<div class="flex justify-between items-center p-4 bg-gray-100">
<div class="text-left font-bold">Logo</div>
<div class="text-right">
<button class="bg-blue-500 text-white px-4 py-2 rounded">Login</button>
</div>
</div>
🔍 Tailwind Classes Explained:
flex: Applies Flexbox layout to the container.justify-between: Places the first child to the left, and the last to the right.items-center: Vertically aligns both items in the center.p-4: Adds padding.
✅ Use case: Navigation bars, header sections, call-to-action layouts.
✅ Method 2: Using Grid with grid-cols-2
If you’re using CSS Grid, Tailwind also lets you align two elements with a 2-column layout.
✅ Example:
<div class="grid grid-cols-2 items-center p-4 bg-gray-200">
<div class="text-left font-semibold">Brand</div>
<div class="text-right">
<a href="#" class="text-blue-600">Contact</a>
</div>
</div>
🔍 Why Use Grid?
- Good for equal-width columns.
- Offers more control when you need to span or place multiple items.
✅ Use case: Dashboard headers, form layouts, static content blocks.
✅ Method 3: Responsive Alignment with md:flex
Tailwind makes it easy to switch between stacked (mobile) and left-right (desktop) layouts.
✅ Example:
<div class="flex flex-col md:flex-row md:justify-between items-center p-4 bg-white">
<div class="mb-2 md:mb-0">Left Item</div>
<div>Right Item</div>
</div>
🔍 Responsive Details:
flex-col: Stacks items vertically on mobile.md:flex-row: Reverts to left-right layout on medium screens and up.md:justify-between: Aligns items on opposite ends of the container.
✅ Use case: Responsive headers, mobile-friendly layouts.
🧠 Bonus Tip: Vertical Alignment
If your two elements have different heights (like a logo and a button), use items-center on the container to align them vertically:
<div class="flex justify-between items-center h-16">
<img src="logo.png" class="h-10" />
<button class="bg-green-500 text-white px-4 py-2 rounded">Sign Up</button>
</div>
✅ Summary
Tailwind CSS makes it easy to align two elements left and right using:
| Method | Key Classes Used | Best For |
|---|---|---|
| Flexbox | flex justify-between | Navbars, buttons, responsive headers |
| Grid | grid grid-cols-2 | Equal-width columns, static layouts |
| Responsive | flex-col md:flex-row justify-between | Mobile-first design |
