JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
   </head>
   <body>
      <div class="container">
         <header class="leftSide">
            <h2 class="leftSideMessage">
               If you scroll up here, the right side is not scrolled up. 
            </h2>
            <p>How to achieve the possibility of scrolling down the right side only while the cursor is on the left side?</p>
         </header>
         <main class="rightSide">
            <article>
               <section class="section rightSideFirstSection">
                  <h2>Only when the cursor in on this side, scrolling down works</h2>
                  <p>
                     Once upon a time, in a land far, far away, there lived a mischievous monkey named Max. Max loved nothing more than to swing from tree to tree, stealing bananas and causing chaos wherever he went. One day, while on his usual banana raid, Max stumbled upon a magical tree that shimmered with every color of the rainbow. Curiosity getting the best of him, Max climbed the tree and discovered a secret stash of candy that would make Willy Wonka jealous. Delighted with his find, Max filled his pockets with candy and swung off to share his treasure with his fellow monkeys. The monkeys were overjoyed with their unexpected treat and danced around in a frenzy of sugar-fueled glee. From that day on, Max became known as the Candy King of the jungle, and every monkey in the land followed him wherever he went, hoping for another taste of his magical candy.
                  </p>
               </section>
               <section class="section rightSideSecondSection">
                  <p>
                     As the sun began to set, Max and his monkey friends decided to have a party to celebrate their newfound treasure. They built a bonfire, strung up colorful lights, and blasted their favorite music. Max even showed off his best dance moves, swinging from vines and doing flips in the air. The other...

CSS

.container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	text-align: left;
font-family: Georgia, serif;
}

.leftSide {
	background-color: #F7F1E5;
	width: 45vw;
	height: 100%;
	position: fixed !important;
	left: 0 !important;
	z-index: 1 !important;
	padding: 2rem 1.5rem 2.5rem;
}

.rightSide {
	width: 50vw;
	min-height: 100vh;
	min-height: calc(var(--vh, 1vh) * 100);
	margin-left: 50%;
}

.section {
	position: sticky;
	top: 0;
	display: inline-block;
	width: 100%;
}

.section>* {

	padding: 0 2rem 0 5rem;
}

.rightSideFirstSection {
	background-color: #E7B10A;
}

.rightSideSecondSection {
	background-color: #898121;
}

.rightSideThirdSection {
	background-color: #4C4B16;
}