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.