How to correctly align the font on the layout (example inside)?

Question

css

Good afternoon ! There is a layout like this:

Arrow 1 - the baseline of the font.
Arrow 2 - line-height, which has nothing to do with the grid.
Grid in 4px and 20px layout. Font alignment for the designer at the bottom of the text.
I have no idea how to do this alignment?

Answer 1

Why is line-height irrelevant to grid? Indents are counted according to the font line, which is automatically generated, according to the line-height size.

Answer 2

You can align it like this align-items baseline
The main thing is that the container should be display flex

Answer 3

This is the sloppiness of the designer or an inaccuracy that accidentally crept in. Enough to round. By default, the same Figma places text objects on a pixel grid, including the baseline.