Below is an example of code that demonstrates what I'm trying to accomplish:
<nav className="flex flex-row justify-between items-center w-full h-[100px]">
<div className="flex flex-row items-center sm:pl-0 ml-auto">
<div className="mr-10">
Child 1
</div>
<p className="text-center">Child 2</p>
</div>
<div className="ml-auto">
<p>Child 3</p>
</div>
</nav>
My goal is to have Child 3 aligned to the right and Child 2 aligned in the center. When Child 1 is removed, Child 2 aligns perfectly in the center. However, when Child 1 is added and slightly shifted left of center, it causes Child 2 to move to the right, throwing off the alignment.
Do I need to resort to using absolute positioning for this layout or is there a better solution?
Appreciate any guidance!