I am facing a layout challenge with three divs: a navigation bar, a webgl player, and a panel. I want the nav bar to be positioned at the top of the screen, the panel aligned to the right-hand side, and the webgl player centered both vertically and horizontally in the remaining space.
While items-center helps with vertical alignment, I have been experimenting with different options for horizontal positioning. justify-between works well for aligning the panel to the right edge, but it also moves the webgl player to the left edge which is not what I want.
Using justify-center centers both elements, but applying place-self-end to the right element did not produce the desired outcome.
Here is a minimal example of the code:
<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>
You can also try it out here: https://play.tailwindcss.com/y3uXkVYcWs
The desired result should look like this: https://i.sstatic.net/QD8qc.png where Green represents the navbar, Blue represents the first div, and Red represents the second div.