<div class="wrapper">
  <aside>
    <h2>Sidebar</h2>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <div class="sticky">Sticky bit</div>
  </aside>
  <main>
    <h2>Main</h2>
    <div class="content">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
    </div>
  </main>
</div>

.wrapper {
  max-width: 1000px;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;

  @media (min-width: 32rem) {
    grid-template-columns: 250px minmax(10px, 1fr);
  }

  > * {
    padding: 1rem;
  }
}

.sticky {
  position: sticky;
  top: 0;
}

nav {
  margin: 0 0 1rem 0;
}

main {
  background-color: #f7f7f7;

  p {
    margin-bottom: 1rem;
  }
}

h2 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

a {
  color: #222;
  text-decoration: none;
}

body {
  font-family: system-ui;
  line-height: 1.4;
}