How to make a narrow sidebar layout for resource lists with CSS

Create an isolated HTML example

Create a new folder and save a plain-text file named index.html. Use an isolated practice file so the experiment does not change a live page. The example uses semantic HTML, a system font and local CSS.

Paste the complete sample

Paste the following into index.html and save it. It includes a viewport declaration, the component styles, and a small-screen rule.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Resource Lists CSS practice</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 2rem; font-family: system-ui, sans-serif; }
.panel { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr); gap: 1.5rem; }
.panel > * { min-width: 0; }
button { font: inherit; padding: .75rem 1rem; }

.panel > * + * { margin-block-start: 1rem; }
.action { margin-top: auto; }
button:focus-visible { outline: 3px solid #185cce; outline-offset: 3px; }
@media (max-width: 36rem) { .panel { grid-template-columns: minmax(0, 1fr); } }
</style>
</head>
<body>
<section class="panel resource-list" aria-label="Resource Lists example">
  <div><h1>Resource Lists</h1><p>A short title and supporting text make the first item easy to inspect.</p></div>
  <div><h2>Second item</h2><p>Use a longer sentence here to test wrapping, spacing and different text lengths.</p></div>
  <div class="action"><button type="button">Example action</button></div>
</section>
</body>
</html>

Inspect the intended visual result

The first track acts as a sidebar and the second as the main content area. Open index.html in your browser and compare it with that description. This is a schematic practice component; the example button has no application action attached.

Test narrow screens and keyboard use

Resize the browser to a narrow phone-like width and then back to desktop width. Look for text clipping and unwanted horizontal scrolling. Press Tab to reach the sample button; its focus indicator should remain visible. Increase browser zoom to 200% and confirm the main text can still be read.

Move the pattern into your component

Copy the .panel rule into the stylesheet for your resource lists. Replace .panel with your project’s actual component class so the rule is scoped. Keep the narrow-screen override and test with real text, translated text and empty content before publishing.