JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed-heading">
  <div class="fixed-wrapper">
    <div class="menuha">
      <span>One</span>
      <span>Two</span>
      <span>Three</span>
    </div>   
  </div>
</div>
<div class="wrapper">
  <div class="sidebar">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis placeat corrupti, velit. Quasi quod illo atque magni. Numquam itaque dignissimos dolorem perferendis a, laboriosam inventore natus, temporibus labore accusamus fugit.</p>
  </div>
  <div class="main-page">
    <p>
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem enim delectus, explicabo, quidem eveniet similique eius animi voluptatibus libero minima iure nam non, repellat, error iste quasi molestiae. Ab, provident.</span>
      <span>Et soluta voluptatibus laborum odio sint cum. Harum atque, sint eligendi delectus sunt, vitae maxime nesciunt ipsum officiis non repellat dignissimos cumque incidunt accusamus eaque possimus odio culpa molestiae. Eligendi.</span>
      <span>Modi, maiores reprehenderit nobis debitis quaerat ad excepturi a reiciendis velit aperiam omnis ducimus ipsum eos blanditiis laboriosam unde eius, id fugit adipisci doloribus. Provident temporibus doloremque, ipsa repellat rem?</span>
    </p>
  </div>
</div>

CSS

body{
  margin:0;
}

.wrapper {
  max-width: 700px;
}

.sidebar {
  float: left;
  width: 150px;
  outline: 2px dashed green;
}

.fixed-heading {
  position: fixed;
  right: 0;
  //width: 64.77987421%;
  //outline: 2px dashed orange;
  width:100%;
}

.fixed-wrapper{
  max-width:700px;
}

.menuha{
  float: right;
  width: 64.77987421%;
  outline: 2px dashed orange;
  position:relative;
}

.menuha:after{
  content:"";
  position:absolute;
  width:200%;
  outline: 2px dashed orange;
  height:100%;
  right:-200%;
}

.main-page {
  float: right;
  width: 64.77987421%;
  margin-top: 100px;
  outline: 2px dashed red;
}

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}