I am trying to position a svg with text in exactly the same position as div with text, no matter the font family used or font size

The problem comes with the first element being offset in x and y position.

I am trying to set both elements in top 0 left 0 absolute position but they fail to match .

Of course manually adding correct offset x and y works, but I want a general solution.

Here is an example that if you run, the texts won’t be positioned correctly one on top of another.
I am trying to make this work with any font, any size.

<div style="position absolute;color:red;font-family:Verdana;font-size:20px; margin-left:0; padding-left:0; left:0; ">
  First Line
</div>
<div style="position:absolute;top:0;left :0; background:transparent;"> 
<svg width="100" height="20" xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="0" font-family="Verdana" text-anchor="start" dominant-baseline="hanging" font-size="20" fill="black">First Linea</text>
 
</svg> ```


Any ideas?
Thanks!