CSS Lyrics with Flex

https://stackoverflow.com/a/67105872/5818622

by coreuter

HTML

<div class="container">
   <div class="line">
     <div class="chord-letter"><span class="chord">C</span>Imagine</div> there's
     <div class="chord-letter"><span class="chord">Cmaj7</span>no</div>
     <div class="chord-letter"><span class="chord">F</span>heaven</div>
   </div>
 </div>

CSS

body {
  padding: 20px;
  font-size: 30px;
}

.container {
  max-width: 450px;
}

.line {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;

  /* border: solid 1px yellow; */
}

.chord-letter {
  display: flex;
  flex-direction: column;
  margin: 0 5px;

  /* border: solid 1px green; */
}

.chord-letter:first-child {
  padding-left: 0;
}

.chord-letter:last-child {
  padding-right: 0;
}

.chord {
  color: gray;
  font-style: italic;
  font-weight: bold;
  font-size: 25px;

  /* border: solid 1px blue; */
}