我正在创建两列布局。左列（标题）是粘性/固定的，而右列是静态的。HTML有3个兄弟元素（header，div.content-column，footer）。页脚放在.content-column下面。
我正在寻找一个解决方案（没有嵌套.content-column与footer），而不是使用margin-left的页脚旁边的标题。任何想法？
先谢谢你!

body, ul {margin:0;}

header {
  background-color: lightgreen;
}

.content-column {
  background-color: lightblue;
  font-size:3rem;
}

footer {
  background-color: lightgray;
}

@media (min-width: 600px) {
body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  min-height: 100vh;
}

header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow-y: auto;
  display: flex;
  flex: 0 1 40vw;
  flex-direction: column;
  align-self: flex-start;
  height: 100vh;
  max-width: 40vw;
}
.content-column {
  display: flex;
  flex-direction: column;
  flex: 0 1 60vw;
  background-color: lightblue;
}

footer {
  margin-left: 40vw;
}
}

<header>
<a href="#">logo</a>
<span>logo subtitle</span>
  <nav>
    <ul>
      <li>about</li>
      <li>contact</li>
    </ul>
  </nav>
</header>
<div class="content-column">
  <main>
    <article>
Quo consequatur dolores facilis fugiat. Maxime non quam eos nisi voluptatem autem minus autem. Consectetur aut molestiae asperiores at impedit. Quam doloribus ut et impedit hic veritatis quia. Quo consequatur dolores facilis fugiat. Maxime non quam eos nisi voluptatem autem minus autem. Consectetur aut molestiae asperiores at impedit. Quam doloribus ut et impedit hic veritatis quia.
Quo consequatur dolores facilis fugiat. Maxime non quam eos nisi voluptatem autem minus autem. Consectetur aut molestiae asperiores at impedit. Quam doloribus ut et impedit hic veritatis quia.…
Quo consequatur dolores facilis fugiat. Maxime non quam eos nisi voluptatem autem minus autem. Consectetur aut molestiae asperiores at impedit. Quam doloribus ut et impedit hic veritatis quia.…
    </article>
  </main>
</div>
<footer>
2023
</footer>