Different Alignments in Tailwind CSS

Question

I have three divs: a nav bar, a webgl player, and a panel. I want the navbar at the top, and beneath it the panel aligned to the right hand side of the screen, and the webgl player to be centered vertically and horizontally in the remaining space.

items-center sucessefully centers things vertically.

For the correct horizonal positioning, so far I have tried justify-between which successfully places the panel against the right edge, but also places the webgl player against the left edge of the screen, which is undesirable.

justify-center places them both in the middle, wherein I expected place-self-end on the right-hand element to correctly place it, but it didn't move at all.

Minimal Code example:

<div class="flex flex-col">
  <div class="bg-green-500 py-12 flex flex-col justify-center"></div>
  <div class="flex flex-row justify-center items-center">
    <div class="bg-blue-500 w-80 h-60 center"></div>
    <div class="bg-red-500 w-80 h-screen "></div>
  </div>
</div>

Can also be found here: https://play.tailwindcss.com/y3uXkVYcWs

Desired Result: Where Green is Navbar, Blue is first div, Red is second div.

Answer 1

After writing all of this, I finally found this answer: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

This says to drop any justify and items-center and instead use margin: auto on the blue element

HTML

<div class="flex flex-col">
  <div class="bg-green-500 py-12 flex flex-col"></div>
  <div class="flex flex-row justify-center">
    <div class="bg-blue-500 w-80 h-60 center" id="webglPlayer"></div>
    <div class="bg-red-500 w-80 h-screen" ></div>
  </div>
</div>

CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

#webglPlayer {
    margin: auto;
}