JSFiddle - React, Tailwind, and code Playground

HTML

<input type='checkbox' id='toggle' />
<label for='toggle'>Toggle hidden/visible</label>
<div id='wrapper' >
<nav>nav<br>nav<br>nav</nav>
<article>
  <header>header</header>
  <main>
    <nav>
      Who bought this, also bought these:
      <img src='http://placehold.it/70x100' />
      <img src='http://placehold.it/70x100' />
      <img src='http://placehold.it/70x100' />
      <img src='http://placehold.it/70x100' />
      <img src='http://placehold.it/70x100' />
    </nav>
    <aside>$100<button>Add to Chart</button></aside>
    <section>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vulputate faucibus quam, eu consectetur nibh venenatis finibus. Suspendisse egestas facilisis velit vel efficitur. Aenean aliquet, est eu lacinia pulvinar, neque turpis vestibulum tellus, sit amet tristique nisl tortor non lectus. Sed luctus ullamcorper ipsum, eget tristique diam fermentum non. Donec accumsan ac purus ac egestas. Duis tincidunt tempor arcu. Nunc vel fringilla lectus.
          <br><br>
          Mauris orci nisi, consequat ornare justo in, pharetra facilisis tellus. Duis imperdiet non arcu quis imperdiet. Etiam vulputate auctor ipsum, sed consequat enim aliquet et. Praesent in justo a nibh laoreet hendrerit ut id tellus. Nunc maximus dui eu malesuada tincidunt. Pellentesque non luctus ipsum. Sed et lectus ante. Sed tempus mollis ipsum, ut auctor neque. Cras porta, diam sit amet ultrices vehicula, metus est ultrices nulla, eu consectetur risus purus et massa. Vestibulum nec felis id purus efficitur laoreet.
          <br><br>
          Praesent eu libero nisi. Nam bibendum laoreet nibh, at ultrices elit condimentum vulputate. Fusce eleifend euismod lorem, vestibulum malesuada risus tempus ut. Etiam ac finibus erat, feugiat dignissim turpis. Nulla vehicula mi feugiat lorem convallis egestas. Proin vulputate hendrerit nibh, sit amet bibendum odio condimentum eu. Sed nec metus massa. In sollicitudin blandit massa vitae consectetur....

CSS

#wrapper {
  position: relative;
  background-image: linear-gradient(to right, beige, beige 100px, transparent 100px, transparent);
  margin-top: 30px;
}
#wrapper > nav {
  float: left;
  background-color: beige;
  width: 100px;
}
#wrapper > article {
  overflow: hidden;
}

header {
  height: 300px;
  background-color: hotpink;
}
main {
  display: block;
  position: relative;
  background-image: linear-gradient(to left, lightgreen 0, lightgreen 100px, transparent 100px, transparent);
}
main > nav {
  float: right;
  height: auto;
  background-color: lightgreen;
  width: 100px;
  margin-left: 10px;
  position: sticky;
  top: 0;
  text-align: center;
  scroll-behavior: smooth;
}
main > aside {
  background-color: lightblue;
  text-align: center;
  position: sticky;
  top: 0;
  margin-right: 110px;
}
main > section {
  text-align: justify;
  overflow: hidden;
}
footer {
  height: 1200px;
  background-image: linear-gradient(to bottom, yellow, transparent);
}
#toggle {
  display: none;
}
#toggle:checked ~ #wrapper > article {
  overflow: visible;
}
label[for='toggle'] {
  position: fixed;
  background-color: gold;
  border: solid 1px silver;
  border-radius: 5px;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
}