HTML CSS- יישור אלמנטים ב display-inline

[מנצפך]

תראו את הקוד הזה:
https://www.w3schools.com/code/tryit.asp?filename=G280MW2P8MW8

איך אפשר לעשות שכל האלמטים יהיו באותו גובה?
הבעיה היא שהתוכן שלהם לא זהה, אבל אני לא מבין למה זה גורם לכך שהגובה לא יהיה זהה.

[chagold]

תהפוך אותם לdiv

[יוסף בן שמעון]

https://jsfiddle.net/y2cj05vw/

https://jsfiddle.net/y2cj05vw/1/

[dovid]

הבעיה היא הפונט. הוא מגדיל את גובה כל השורה בה הוא נמצא.
אני חושב שעדיף לא להגיע לניואנסים הללו, ע"י שימוש בflexbox ו/או בcss grid, זה ללא שום ספריה חיצונית ונתמך בכל הדפדפנים המודרנים.

[יוסף בן שמעון]

גיליתי עכשיו במקרה:
https://jsfiddle.net/to52nfr0/