Quiero que G se pegue al fondo de su padre. (G hasta la parte inferior del fondo blanco).
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> También probé display: flex; align-items: flex-end; pero no funcionó
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 { } .clef { position: absolute; bottom: 0; font-size: 1.008em; background: pink; line-height: 0.7; /* font-size: 0.25em; */ vertical-align: "bottom"; } <div class='staff'> <span class='clef'>Good</span> </div>