dl.sticky-stack
  dt A
  dd Aceyalone
  dd Aesop Rock
  dd Angel Haze
  dd Atmosphere

  dt B
  dd Babbletron
  dd Bike For Three
  dd Binary Star
  dd Blackalicious
  dd Black Sheep
  dd Blueprint
  dd Blue Scholars

  dt C
  dd Cecil Otter
  dd Chali 2na
  dd Chance The Rapper
  dd Common Market
  dd Cool Calm Pete
  dd Czarface

  dt D
  dd Danger Doom
  dd Darc Mind
  dd Dem Atlas
  dd Dessa
View Compiled
@use postcss-nested;

.sticky-stack {
  background: hsl(265 100% 47%);
  color: white;
  margin: 0;
  
  height: 80vh;
  max-height: 60ex;
  min-width: 50vw;
  border-radius: 1rem;
  overflow-y: auto;
  

  & dt {
    position: sticky;
    top: 0;

    font-weight: bold;
    background: hsl(265 100% 27%);
    color: hsl(265 100% 80%);
    padding: .25rem 1rem;
  }

  & dd {
    margin: 0;
    padding: .75rem 1rem;

    & + dt {
      margin-top: 1rem;
    }
  }
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: system-ui;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.