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
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>