<div class='parent-box'>
  <h2>Pokemon I own</h2>
  <dl>
    <dt>A</dt>
    <dd>Abra</dd>
    <dd>Aggron</dd>
    <dd>Alakazam</dd>
    <dd>Arbok</dd>
    <dd>Aron</dd>
    <dd>Azumarill</dd>
    <dd>Azurill</dd>
  </dl>
  <dl>
    <dt>B</dt>
    <dd>Bayleef</dd>
    <dd>Beedrill</dd>
    <dd>Bellossom</dd>
    <dd>Blastoise</dd>
    <dd>Blaziken</dd>
    <dd>Blissey</dd>
    <dd>Bulbasaur</dd>
    <dd>Butterfree</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Caterpie</dd>
    <dd>Chansey</dd>
    <dd>Charizard</dd>
    <dd>Clefairy</dd>
  </dl>
  <dl>
    <dt>D</dt>
    <dd>Delphox</dd>
    <dd>Dewgong</dd>
    <dd>Diglett</dd>
    <dd>Ditto</dd>
    <dd>Dragonite</dd>
  </dl>
</div>

* {
  box-sizing: border-box;
}

.parent-box {
  position: relative;
}

.dl {
  margin: 0;
  padding: 24px 0 0 0;
}

dt {
  background: #007FFF;
  border-bottom: 1px solid yellow;
  border-top: 1px solid yellow;
  color: yellow;
  margin: 0;
  padding: 2px 0 0 12px;
  position: sticky;
  top: 3px;
}

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
}