In Tailwind CSS, you can align a child element to the left or right side of its parent div by using the mr-auto or ml-auto utility class, respectively (we also add the flex utility to the parent). This technique works well in both these situations:
- The parent contains only a single child
- The parent contains multiple child elements
An alternative way to achieve your goal is to use the float-left and float-right utilities (I personally prefer flex to float, but the choice is totally up to you).
For more clarity, let’s see the practical examples below.
Example 1
Screenshot:
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<title>Example</title>
</head>
<body class="p-10">
<div class="bg-sky-300 w-full">
<div class="bg-amber-300 w-48 h-48 ml-auto p-10">Align Right</div>
</div>
</body>
</html>Example 2
This example does the something but with float-right.
Screenshot:
The code:
<body class="p-10">
<div class="bg-green-500 w-full block">
<div class="bg-amber-300 w-48 h-48 float-right p-10">Float Right</div>
<div class="clear-both"></div>
</div>
</body>That’s it. Happy coding & have a nice day!
