I can’t vertically align to bottom a font size of several em values

I want G to stick to the bottom of it’s parent. (G to the bottom of the white background).

body {
  position: relative;
  background: #ccc;
  font-size: 2em;
  padding: 3em;
}

.staff {
  display: flex;
  padding: 1em;
  background: white;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
}

.staff span {
  position: absolute;
  bottom: 0;
  font-size: 1.008em;
}

.clef {
background: pink;
  font-size: 0.25em;
  vertical-align: 'bottom';
}

<div class='staff'>
<span class='clef'>G</span>
</div>

I also tried display: flex; align-items: flex-end; but didn’t work