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

[Anonymous]

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

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

      function showChord() {

document.getElementById("chord").innerHTML = chordList[chordIndex];
document.getElementById("chordWithLineHeight").innerHTML =          chordList[chordIndex];

chordIndex++;
if (chordIndex > chordList.length -1) chordIndex = 0;

setTimeout(showChord, 1500);
}

let chordIndex = 0;
let chordList = ["♯","♭"];
showChord();

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

    * {margin: 0; padding: 0;}
body {font-family: sans-serif;}

.chord-div {font-size: 3em; background: lightgreen; margin: .1em; }

#chord {background: lightblue;
border: 1px blue solid;}

#chordWithLineHeight {background: lightblue;
border: 1px blue solid;
line-height: 1}

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

       No line-height set 



 With line-height set 

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