Js: ‘do A on class X’ prevents/overrides ‘do B on class X’

I’ve got a songbook with a complex setup. In the snippet you’ll find the core, a <div class"txt CHORUS"> and a <div class="txt LYRICS">.

The community helped me with a script to increase font-size of .txt.

I’m trying to use the same solution to increase padding-top of .LYRICS, but it prevents/overrides the increase in font-size of .LYRICS, and I’m not able to find anything like that on the web.

I’m posting without the code that breaks the scaling in order to demonstrate how the scaling works, and why I have to scale the padding-top of .LYRICS at the same rate of the font-size of .txt.

document.querySelector("button.in").addEventListener("click", () => zoom(1.1));
document.querySelector("button.out").addEventListener("click", () => zoom(0.9));

function zoom(coeff) {
    document.querySelectorAll(".txt, summary").forEach(el => {
        let css = getComputedStyle(el).getPropertyValue("font-size");
        let size = parseFloat(css);
        let unit = css.replace(/[d.-]*/, "");
        el.style.fontSize = size * coeff + unit;
    });
}

summary { font-size: 20pt }
.txt { font-family: monospace; white-space: pre-wrap; font-size: 14pt }
.zoombox { display: flex; padding: 8pt 0pt }
.chords { position: absolute; }
.lyrics { position: relative; padding-top: 15pt; }
.chords, .lyrics { line-height: 2.3; }

<div class="zoombox">
  <button class="btn zoom out">-</button>
  <div class="txt"> ZOOM </div>
  <button class="btn zoom in">+</button>
</div>

<details open>
  <summary>TITLE 1</summary>
  <div class="songs">
    <div class="txt chords">  Em   F        D#    </div>
    <div class="txt lyrics">A song with its lyrics</div>
  </div>
</details>

<details open>
  <summary>TITLE 2</summary>
  <div class="songs">
    <div class="txt chords">  Em   F        D#    </div>
    <div class="txt lyrics">A song with its lyrics</div>
  </div>
</details>