<<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <script src="main.js"></script>
</head>
<body>
    <dl>
        <div>
          <dt>A</dt>
          <dd>Andrew W.K.</dd>
          <dd>Apparat</dd>
          <dd>Arcade Fire</dd>
          <dd>At The Drive-In</dd>
          <dd>Aziz Ansari</dd>
        </div>
        <div>
          <dt>C</dt>
          <dd>Chromeo</dd>
          <dd>Common</dd>
          <dd>Converge</dd>
          <dd>Crystal Castles</dd>
          <dd>Cursive</dd>
        </div>
        <div>
          <dt>E</dt>
          <dd>Explosions In The Sky</dd>
        </div>
        <div>
          <dt>T</dt>
          <dd>Ted Leo &amp; The Pharmacists</dd>
          <dd>T-Pain</dd>
          <dd>Thrice</dd>
          <dd>TV On The Radio</dd>
          <dd>Two Gallants</dd>
        </div>
      </dl>
</body>
</html>>
* {
  box-sizing: border-box;
}

dl > div {
  background: #FFF;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}