<form action="">
  <p>
    <input type="checkbox" name="" id="start">
    <label for="start">Align self: start</label>
  </p>
</form>

<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>
      </ul>
    </nav>
  </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: 700px;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;

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

  > * {
    padding: 1rem;
  }
}

aside {
  --align-self: stretch;
  position: sticky;
  top: 0;
  align-self: var(--align-self);
  background-color: lightblue;
}

/*Styles that aren't directly related to the demo*/

form {
  padding: 1rem;
  text-align: center;
}

main {
  background-color: #f7f7f7;

  p {
    margin-bottom: 1rem;
  }
}

nav {
  li:not(:last-child) {
    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;
}

let getAlignValue = document.querySelector("#start");
let aside = document.querySelector("aside");

getAlignValue.addEventListener("click", function () {
  console.log(this.checked);

  if (this.checked) {
    aside.style.setProperty("--align-self", "start");
  } else {
    aside.style.setProperty("--align-self", "stretch");
  }
});