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

21 May, 2021
In this article, we will learn how to align two HTML elements on the left and right sides of a document using Tailwind CSS.
You can easily float the elements to left and right using Tailwind CSS. This can be done using either tailwind flex or flow-root classes.
Classes used:
flow-root: This class quickly clears floated content within a container by adding a flow-root utility.
position: This is used for controlling the placement of positioned elements.
Method 1: Using flow-root utility
Note: The class flow-root is added in the upgraded version i.e. v2.0 or greater in Tailwind. If you have not upgraded then simply replace flow-root with clearfix in the codes. The clearfix class has been removed since flow-root is a simpler solution to the same problem in modern browsers.
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 1: Add flow-root class to the parent ( div)  of the element that you have to align left or right.
HTML
<!DOCTYPE html>  <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
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. 
Parameters:
relative: This class is used to set the position of an element relative to the normal flow of the document.
absolute: This class is used to set the position of an element outside the normal flow of the document, causing neighboring elements to act as if the element does not exist.
left-0 : It positions the element in the left of the screen.
right-0 : It positions the element in the right side of the screen.
top-0: It positions the element in the top side of the screen.
bottom-0 : It positions the element on the bottom side of the screen.
Example 2:
HTML
<!DOCTYPE html>  <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>
Output:
CSS-Questions
Tailwind CSS
Tailwind CSS-Questions
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript