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.
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>
Output:
Similar Reads
How to Align Form Elements to Center using Tailwind CSS? Form elements are parts of a webpage that let users enter information. They include things like text boxes, checkboxes, radio buttons, dropdown menus, and buttons. To center form elements using Tailwind CSS, use classes like flex, items-center, and justify-center on a parent container.These are the
2 min read
How to centre an Element using Tailwind CSS ? Tailwind CSS follows a utility-first approach, which means that instead of writing custom CSS for each component, we can utilize pre-defined classes that apply specific styles directly to HTML elements. We can center an element by using the utility classes of "margin" and "flex". This article will g
3 min read
How to Align Items and Space with Flex in Tailwind CSS? Flex allows you to structure the elements in a container with precise control over alignment and spacing. Tailwind CSS provides utility classes to use Flexbox for aligning items and distributing space between them. By using classes like justify-between and justify-around, you can easily create layou
3 min read
How to align the last line of a paragraph element to the right using CSS? In this article, we will set the alignment of last paragraph element to the right by using CSS property. To set the alignment of last paragraph to right, we use CSS text-align-last property. The text-align-last is used to set the last line of the paragraph just before the line break. The line break
2 min read
How to Fixed an Element to Center in Tailwind CSS? Here are two different methods to center an elementwith Tailwind CSS.1. Using mx-auto ClassWe can use the 'mx-auto' utility class to center an element horizontally. The "mx-auto" class centers an element horizontally within its parent container by setting the left and right margins of the element to
2 min read