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:
<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>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!
