.sticky-slide
  dl
    dt A
    dd Aceyalone
    dd Aesop Rock
    dd Angel Haze
    dd Atmosphere
  dl
    dt B
    dd Babbletron
    dd Bike For Three
    dd Binary Star
    dd Blackalicious
    dd Black Sheep
    dd Blueprint
    dd Blue Scholars
  dl
    dt C
    dd Cecil Otter
    dd Chali 2na
    dd Chance The Rapper
    dd Common Market
    dd Cool Calm Pete
    dd Czarface
  dl
    dt D
    dd Danger Doom
    dd Darc Mind
    dd Dem Atlas
    dd Dessa
View Compiled
@use postcss-nested;

.sticky-slide {
  background: hsl(265 100% 47%);
  color: white;
  
  height: 80vh;
  min-width: 50vw;
  max-height: 50ex;
  border-radius: 1rem;
  overflow-y: auto;
  
  & > dl {
    margin: 0;
    
    & dt {
      position: sticky;
      top: 0;

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

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

      &:last-child {
        margin-bottom: 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.