How can I generate line number from css or javascript based on height of container

I have a situation where I have to make something that looks like a code editor and to acheive this I have to use HTML, CSS and Js without any libraries.

I have achieved pretty much everything except the line numbers and I am not sure how to do it.

So far I have achieved this:
enter image description here

and this is what actually is my target:
enter image description here

supposing that I have this html structure:

<html>
    <head>
    </head>
    
    <body>
        <div class="lines"></div>
        <div class="code"></div>
    </body>
</html>

enter image description here

how do I populate lines based on the height of content in code using CSS or JavaScript?