Responsive div independent scrolling, sizing, and placement

Question

The TL;DR objective is a page with these elements (important things for the question indicated with exclamation point, the rest are only for context):

• Header with an image
• ! Big scrolling div at page left on medium++ screens, with child divs inside that scroll within it
• ! Another div that appears at page right on medium++ screens, but on TOP on small
• A full-width div just above footer
• A full-width page footer at page bottom

The code below implements what I want and works on screens Medium++. Notice that the bigger div on the left scrolls independently from the div on the right (this is very important). But on mobile (small), I want all the components to just appear in order, one above the other, with only one exception: the div that is on the right on larger screens must appear on top on the smaller screens. I do this with Tailwind's flex-wrap-reverse in the code and that works. To make my question most clear, the text in each div in my code has a number in parentheses. That is the sequence they should be "stacked" on small screens.

Lots of things work as desired (like scrolling) but here is the problem on small screens:

1. The "right-hand" div (parentheses #2 in the code) does appear at top as desired, but its size is wrong
2. its content is not visible
3. it overwrites the header (parentheses #1 in the code)

export default function ScrollTest() {
  return (
    <div className='h-screen w-screen'>
      logo image will be here (1)
      <div className='h-full flex flex-wrap-reverse md:flex-nowrap md:overflow-hidden'>
        <div className='w-full h-full md:w-3/5 overflow-scroll'>
          <div className='h-48 bg-red-100'>Left 1, scrolled in my parent (3)</div>
          <div className='h-48 bg-blue-100'>Left 2, scrolled in my parent (4)</div>
          <div className='h-48 bg-red-200'>Left 3, scrolled in my parent (5)</div>
          <div className='h-48 bg-blue-200'>Left 4, scrolled in my parent (6)</div>
          <div className='h-48 bg-red-300'>Left,5, scrolled in my parent (7)</div>
          <div className='h-48 bg-blue-300'>Left 6, scrolled in my parent (8)</div>
        </div>
        <div className='w-full md:w-2/5 sticky overflow-hidden'>
          <div className='h-96 bg-green-100'>On top on mobile; on right when Medium and no scroll when left scrolls (2)</div>
        </div>
      </div>
      <div className='w-full flex bg-slate-100'>
        This is across the full width (9)
      </div>
      <div className='w-full flex bg-purple-100'>
        This is the footer (10)
      </div>
    </div>
  )
}

I suspect my problem has to do with properly setting the heights of the divs, but everything I tried did not work. This is various combinations of h-full, h-max on various divs, along with overflow-scroll, overflow-auto and overflow-hidden.

The problem is causing me to want to wander with eyes closed into oncoming traffic.

Oh, and not essential to the main question, but I will bestow extra karma-blessing-points upon you if you can tell me how to keep the "right-hand" div always at the top of its container if the whole page begins to scroll.

Update with Solution It was so easy. Essentially, there are two main divs: the left side and the right side when on Medium++. My code was specifying full height (h-full) for each of them. Well, you can't have more than one div taking up the full height of the parent when they are wrapping and stacked one upon another. Once I set those Tailwind utilities to apply only when they were side by side (md:h-full), everything worked perfectly.