JSFiddle - React, Tailwind, and code Playground

HTML

<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="menu">
    <div class="fixed-heading">
      <span>One</span>
      <span>Two</span>
      <span>Three</span>
    </div> 
  </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

.wrapper {
  max-width: 700px;
  outline: 2px dashed blue;
}

.sidebar {
  float: left;
  width: 150px;
  outline: 2px dashed green;
}
.menu {
  width: 64.77987421%;
  float: right;
}
.fixed-heading {
  position: fixed;
  width: 64.77987421%; /* Если убрать ширину, то ширина станет по контенту */
  outline: 2px dashed orange;
}

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

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