I am trying to create a div with a fixed left section & scrollable right section and other divs below them. I went through many blog posts and I am not able to figure out, how to create this particular page in react JS using Tailwind CSS. I am using react JS & Tailwind CSS. I have added the structure of my page and also added a similar page for reference.

Structure of my page :

<div className="mainDiv">
  <div className="rowDiv">
    <div className="staticDiv">
      <ProductImages 
       images={productData.mediaUrls} 
      />
    </div>
    <div className="scrollableDiv">
      <ProductInfo
       productData={productData}
      />
    </div>
  </div>
  <div className="relatedProductsDiv">
   <RelatedProducts 
    sectionHeading="Related products" 
   />
  </div>
  <div className="recentlyViewedProductsDiv">
   <RecentlyViewedProducts
    sectionHeading="Recently viewed products" 
   />
  </div>
</div>

Similar page: Click here to view a similar page

1. div with className staticDiv should scroll only after scrollableDiv completes its full scroll.
2. once scrollableDiv finishes its full scroll, both the divs (staticDiv and scrollableDiv) should scroll normally to show relatedProductsDiv and recentlyViewedProductsDiv.
3. Please click here to view a similar page to get my question in more detail.
4. I am trying to create a page similar to the one in the link.