How to align two elements left and right using tailwind CSS ?

Last Updated : 20 Sep, 2024

To align two elements left and right means positioning one element on the left side and the other on the right within the same container. This layout creates a balanced, visually divided space, commonly used for navigation menus, headers, or footers.

You can easily float the elements to the left and right using Tailwind CSS. This can be done using either tailwind flex or flow-root classes.

Table of Content

Using flow-root utility
Tailwind CSS Position class

Method 1: Using flow-root utility

The flow-root utility in Tailwind CSS creates a block formatting context that clears floated elements. By applying flow-root to a parent container and using float-left and float-right on child elements, you can easily align elements to the left and right.

Syntax:

<div class="flow-root">  
    <p class="float-left">Welcome to GeeksforGeeks</p> 
    <p class="float-right">A complete portal for geeks</p>
</div>

Example : In this example we use Tailwind CSS to align two paragraphs, one on the left and one on the right, within a div using the flow-root utility. It styles the text with green color variations.

HTML

<!DOCTYPE html>
<html>

<head>
    <head>
        <title>
            Using flow-root utility
        </title>
    </head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

    <style>
        body,
        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>

    <b>Positions using class flow-root</b>
    <br /><br />

    <div class="flow-root ">
        <p class="float-left text-green-600">
            Welcome to GeeksforGeeks
        </p>

        <p class="float-right text-green-800">
            A complete portal for geeks
        </p>
    </div>
</body>

</html>

Output:

Method 2: Tailwind CSS Position class

The Tailwind CSS position class allows precise element placement using relative and absolute. Set the parent as relative, then apply absolute on child elements. Combine with left-0, right-0, or other utilities to position elements on the left or right.

Syntax:

<div class="relative">
    <p class="absolute left-0">
        Welcome to GeeksforGeeks
    </p> 
    <p class="absolute right-0">
        A complete portal for geeks 
    </p>
</div>

Note: You can use the {top|right|bottom|left|inset}-0 utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent. You can also use the top and bottom parameters to position the element in the way that you want.

Example : In this example we are using Tailwind CSS relative and absolute classes to align elements. One paragraph is positioned to the left and the other to the right, with text styled in green shades.

HTML

<!DOCTYPE html>
<html>

<head>
    <head>
        <title>Tailwind CSS Position class</title>
    </head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet">

    <style>
        body,
        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>

    <b>
        Position left and right using
        relative class
    </b>
    <br /><br />

    <div class="relative">
        <p class="absolute left-0 text-green-600">
            <b>Welcome to GeeksforGeeks </b>
        </p>

        <p class="absolute right-0 text-green-800">
            <b>A complete portal for geeks </b>
        </p>
    </div>
</body>

</html>