How to Align Two Elements Left and Right Using Tailwind CSS

When building modern layouts, a common requirement is to align two elements—one to the left and one to the right—on the same horizontal line. Think of a navigation bar with a logo on the left and a menu or button on the right. With Tailwind CSS, this layout is quick and easy to achieve using utility classes.

In this blog post, you’ll learn how to align two elements side by side with one on the left and the other on the right using Tailwind’s utility-first approach.

✅ The Goal

We want a layout like this:

[Left Element]                             [Right Element]

Both items are on the same line, with space between them.

✅ Method 1: Using Flexbox with justify-between

Tailwind makes this layout simple using flex and justify-between.

📄 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">
    <a href="#" class="text-blue-600">Login</a>
  </div>
</div>

🧠 Explanation:

• flex: Turns the container into a flexbox.
• justify-between: Pushes first child to the left, last child to the right.
• items-center: Vertically aligns both elements in the center.
• p-4: Adds padding for spacing.

✅ Method 2: Align Left and Right with Spacer

You can also use a spacer between elements using flex-grow.

Example:

<div class="flex items-center p-4 bg-white">
  <div class="text-left">Back</div>
  <div class="flex-grow"></div>
  <div class="text-right">Next</div>
</div>

Explanation:

• flex-grow on the spacer div pushes the last element to the far right.
• Useful if you want more control over spacing or want to insert more items between the two ends.

📱 Responsive Example

Here’s a responsive version of the layout:

<div class="flex flex-col sm:flex-row justify-between items-center p-4 bg-gray-50">
  <div class="mb-2 sm:mb-0">© 2025 YourSite</div>
  <div>
    <a href="#" class="text-blue-500">Privacy Policy</a>
  </div>
</div>

• flex-col sm:flex-row: Stacks vertically on mobile, switches to horizontal on larger screens.
• mb-2 sm:mb-0: Adds bottom margin only on small screens.

📝 Conclusion

Aligning one element to the left and another to the right is a common layout pattern that’s effortless with Tailwind CSS. By combining flex with justify-between or using a spacer element with flex-grow, you can create responsive, clean, and professional UI components with minimal effort.

Whether you’re building navbars, headers, footers, or buttons—Tailwind’s utility classes give you full control over alignment without writing custom CSS.