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 the 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.
<!DOCTYPE html><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: This example shows the use of the above-explained approach.
<!DOCTYPE html><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: