JSFiddle - React, Tailwind, and code Playground

by EvilDr

HTML

<div class="PageContainer">

  <div class="OuterContainer">

    <div class="SideOne">

      <div class="CompanyLogo">
        <img src="https://via.placeholder.com/250x100.png" alt="" />
      </div>

      <div class="MyStickMenu">
        <h2>
          (Not-so) Sticky
        </h2>
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Away</a>
          </li>
        </ul>
      </div>

    </div>

    <div class="SideTwo">

      <h1>
        Scrollable page
      </h1>

      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>

    </div>

  </div>
</div>

SCSS

.PageContainer {

  .OuterContainer {
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;
    
    .SideOne {
      background-color:#fee;  
      align-self: flex-start /* Solution from https://stackoverflow.com/questions/44446671 */; 
      width: 10em;
      
      .CompanyLogo {
        img {
          width: 100%;
        }
      }
      
      .MyStickMenu {
        border:1px solid blue;
        background-color:#eef;
        position: sticky;
        top: 0;
        
      }
    }

    .SideTwo {
      background-color:#ddd;
      flex-grow: 1;
      flex-shrink: 1;
    }
  }
}