The vertical-align property controls the alignment of elements placed next to each other on a line. That's why you can apply it only to inline or inline-block elements or elements inside table cells.

The baseline value is the default alignment of elements. From the typography theory, you might know the baseline is the invisible line the text sits on. So, the vertical-align: baseline; aligns the baseline of the child element with the baseline of its parent.