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>

With grid:

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-[minmax(0,1fr),auto,minmax(0,1fr)] items-center border border-dashed">
  <div></div>
  <div class="w-32 h-32 bg-red-500"></div>
  <div class="w-20 h-20 bg-green-500 ml-auto"></div>
</div>