Center-align one element and right align second element- Tailwind CSS

Question

I have attached a rough idea of what I am trying to achieve, the dotted line represents the center of the container. I am trying to center align one div element, then right align a second div within the same row, while both elements are centered horizontally.

Answer 1

Try like this:

 <script src="https://cdn.tailwindcss.com"></script> <div class="flex items-center justify-center border border-dashed"> <div class="flex-1"></div> <div class="w-32 h-32 bg-red-500"></div> <div class="flex-1"> <div class="w-20 h-20 bg-green-500 ml-auto"></div> </div> </div>