Specify line-height css propery for span class within code-tag block

Question

Can someone help me with this CSS, jquery problem please! I have a simple website. I have as you can see a class named code (that I assume overrides the original code tag that I also have). I also have a class named codeComment. In the later class I would like to add a smaller line-height than for the code-blocks because I don't want to wrap all the code in code-blocks. Im lazy and was thinking it will work somehow to just have one big code-block and separate comments with different classes and it seems to work fine with the other properties in codeComment like for example color. I guess my custom code-tag overrides it. I also tried by using jQuery but I guess the correct way doing it would be using css?

ps. Also when I try a simple jQuery line like this (the test-class contains only line-height). I get the same line-height as from original code-tag:

$("span").addClass("test");

(snip from my code).

html:

<div class="border1">
    <p class="code"><code>
        document.querySelector("h1");<br>
        <span class="codeComment">Javascript library for shorter, more efective code. We need to get the CDN from jQuery to use it. The CDN has to be placed before the custom js-link
        so that it can recognize the code from this js-file.<br></span>
        $("h1");<br>
        <span class="codeComment">//Change h1 to green.<br></span>
        $("h1").css("color", "green")<br>

css:

.code { text-align: left; font-size: 1.5rem; font-weight: bold;

}

.codeComment { font-size: 1.0rem; padding: 2% 0 2% 0; color: #000000; line-height: 10px; }

Picture: As you can see below the line-height seems a bit big!