Is it possible to position single-line text element inside div so, that its baseline coincides with bottom border of div precisely. Just like in svg rect. I can do it manually, but it would be fine to have universal method for any font-size. Some shift measured in 'em' units maybe?
Now i do something like this to align text in two div's ('name' and 'start'), font-sizes are different and horizontal alignments are different, i want them to align vertically precisely not by manual tuning of bottom margin:
.project-div .footer {
position: absolute;
bottom: 0px;
height: 28px;
width: 100%;
display: inline-block;
line-height: 28px;
}
.project-div .footer .name {
position: absolute;
left: -1px;
bottom: -20%;
line-height: 28px;
font-size: 28px;
height: 28px;
}
.project-div .footer .start {
position: absolute;
right: -3px;
bottom: -10%;
line-height: 18px;
font-size: 18px;
height: 18px;
font-family: "Arial Black";
color: #ccc;
}