Independently scrolling divs using tailwind and sticky - css

Question

I'm having trouble getting the right, "Scroll independently", div, to scroll independently of its sibling div to its left. I would like to be able to do this without changing anything outside of the <!-- CONTENT START --> <!-- CONTENT END --> comments. It seems to be close, but I'm stuck. The "Scroll" and "Scroll independently" div's always scroll together. I'm running this in https://play.tailwindcss.com/
Any help would be greatly appreciated.
<div class="flex bg-gray-100 justify-center">
<div class="flex flex-col w-full max-w-5xl pb-7">
<nav class="sticky top-0 flex items-center justify-between bg-gray-700 text-white h-16 z-40 p-2">
<div class="flex w-1/3">
{Left}
</div>
<div class="flex justify-center w-1/3">
{Middle}
</div>
<div class="flex justify-end items-center w-1/3 gap-2">
{Right}
</div>
</nav>
<!-- CONTENT START -->
<div class="flex">
<div class="w-2/3">
<div class="sticky top-16 w-full h-20 mb-2 bg-green-500">
Don't scroll
</div>
<div class="w-full h-96 mb-2 bg-red-500">
Scroll
</div>
</div>
<div class="w-1/3 mb-2 h-[1000px] bg-pink-400">
Scroll independently
</div>
</div>
<!-- CONTENT END -->
<footer class="fixed inset-x-0 bottom-0 z-50 bg-gray-700 h-7">
<div class="flex items-center justify-end px-8 pt-1">
<div class="text-sm text-white">{versionStr}</div>
</div>
</footer>
</div>
</div>

Answer 1

This cleaned it up nicely:
https://play.tailwindcss.com/Dbd5vnExhk
<div class="flex bg-gray-100 justify-center">
<div class="flex flex-col w-full max-w-5xl pb-7">
<nav class="sticky top-0 flex items-center justify-between bg-gray-700 text-white h-16 z-40 p-2">
<div class="flex w-1/3">
{Left}
</div>
<div class="flex justify-center w-1/3">
{Middle}
</div>
<div class="flex justify-end items-center w-1/3 gap-2">
{Right}
</div>
</nav>
<!-- CONTENT START -->
<div class="flex">
<div class="w-2/3">
<div class="sticky top-16 w-full h-20 bg-green-500">
Don't scroll
</div>
<div class="w-full h-[2000px] bg-gradient-to-b from-red-300 to-red-800">
Scroll
</div>
</div>
<div class="w-1/3 h-[calc(100vh-5.75rem)] sticky top-16 overflow-y-scroll overscroll-contain bg-pink-400">
<div class="h-[1000px]">
Scroll independently
</div>
</div>
</div>
<!-- CONTENT END -->
<footer class="fixed inset-x-0 bottom-0 z-50 bg-gray-700 h-7">
<div class="flex items-center justify-end px-8 pt-1">
<div class="text-sm text-white">{versionStr}</div>
</div>
</footer>
</div>
</div>