Есть ли в HTML способ предотвратить появление ♭ персонаж от смещения вниз? ⇐ CSS

[Anonymous]

Я пытаюсь написать простую HTML-страницу для вывода музыкальных аккордов. Я показываю случайно сгенерированные аккорды, чтобы попрактиковаться в смене аккордов (например, с помощью карточек).
Когда я вывожу аккорд, содержащий «плоский» символ, весь аккорд кажется прыгающим вниз — это увеличивает вертикальная высота включающего и отображается внизу. Другие аккорды (с «диезом» или без него) отображаются так, как ожидалось.
JSFiddle для демонстрации: https://jsfiddle.net/blatwell9/qjfcLtdv/3/Есть ли способ предотвратить сдвиг вниз?
Пример смещения вниз
Код, демонстрирующий эффект. Обратите внимание на эффект отображения фона и аккорда :

Код: Выделить всё

body {
font-family: sans-serif;
}

.chord-div {
font-size: 3em;
background: lightgreen;
margin: 0.2em;
float: left;
}

.chord-div span {
background: lightblue;
border: 1px blue solid;
}

Код: Выделить всё

A

A♯

A♭

Подробнее здесь: https://stackoverflow.com/questions/791 ... fting-down