I would like my cells on the left to keep a height of the text size without growing up by what is in the cell on the right
As is the case for the cell in yellow (Menu Item 2 with absolute)
In the red frame I did not use an absolute position for the right element
Is there any way to prevent the left cell from growing its height without using an absolute element?
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="w-full m-8">
<ul class="bg-green-700 flex flex-col gap-2">
<li class="flex flex-row border-2 border-red-600">
<span class="flex-grow">Menu Item 1 without absolute</span>
<ul class="flex-grow bg-white">
<li class="">Menu Item 1.1</li>
<li class="">Menu Item 1.2</li>
<li class="">Menu Item 1.3</li>
</ul>
</li>
<li class="flex flex-row relative border-2 border-yellow-600">
<span class=flex-grow>Menu Item 2 with absolute</span>
<ul class="flex-grow right-96 absolute bg-white">
<li class="">Menu Item 2.1</li>
<li class="">Menu Item 2.2</li>
<li class="">Menu Item 2.3</li>
</ul>
</li>
<li class="">Menu Item 3</li>
</ul>
</div>