<main class="layout-sidebar">
  <section class="sidebar">
    <h2>This is the sidebar</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim sequi tempore aliquid expedita unde amet voluptas odit voluptate? Quod dolorum fugit veniam odit necessitatibus tempore inventore magnam autem commodi. Tenetur.`</p>
  </section>
  <article class="content">
    <h2>This is the main content</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime eligendi architecto, necessitatibus obcaecati quia voluptates soluta odio autem nemo, eveniet iure incidunt et! Nulla aperiam quasi eligendi eveniet, fuga sapiente!</p>
  </article>
</main>
@function --layout-sidebar(--sidebar-width: 10ch) {
  result: 1fr;

  @media (width > 640px) {
    result: fit-content(var(--sidebar-width)) minmax(min(50vw, 30ch), 1fr);
  }
}

main.layout-sidebar {
  display: grid;
  gap: 1rem;
  grid-template-columns: --layout-sidebar(40ch);
}

@layer pen {
  .sidebar {
    padding: 1rem;
    outline: 2px dashed blue;
  }

  .content {
    padding: 1rem;
    outline: 2px dashed red;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.