textareaに行番号が適切につけられない

実現したいこと

textareaの左に，VScodeのように行番号をつけたいです．

前提，発生している問題

https://dotnsf.blog.jp/archives/1077459283.html
このサイトを参考にして，このリポジトリを取ってきて，手元のtextareaにつけようとしたのですが，下図のように，ずれて表示されてしまいました．

この問題に関するエラーはコンソールには出力されておりません．

該当のソースコード

https://github.com/snym-yt/testLanguageSettings
jquery-linedtextarea-masterが取ってきたフォルダで，index.htmlで変更した部分は以下の部分です．

HTML

1 <div id="codeEditor" class="tabcontent"> 2 <textarea class="lined" id="codeInput" style="width: 100%;" ></textarea> 3 <script> 4 $(function() { $(".lined").linedtextarea();}); 5 </script>