javascript – Autoset peak and with of textarea which has div behind it

I am making a easy code editor with syntax highlighting. the highlighting works like this: I’ve a textarea whose contents are clear. Proper behind that textarea, there’s a div, whose worth routinely updates to that of the textarea however with syntax highlighting.

So, proper now I am making a operate which resizes the textarea’s peak and width to indicate all its contents and in addition to be in sync with the div.
I attempted with this code:

HTML

<div class="my-code">
    <div id='color-code'></div>
    <textarea id='main-code'></textarea>
</div>

CSS

.my-code {place: relative; background: hsl(220, 16%, 14%);  width: 80%; overflow: auto;}

#color-code, #main-code {padding: 16px;
  prime: 0; left: 0; proper: 0; backside: 0;
  white-space: pre-wrap; font-family: monospace; font-size: 16px; line-height: inherit;}

#main-code {place: relative;
  colour: clear; /* Make textual content invisible */
  caret-color: hsl( 50, 75%, 70%); /* However hold caret seen */ margin-bottom: 20px; }

#main-code:focus {define: 1px stable hsl(220, 16%, 19%);}
#main-code::choice {background: hsla( 0, 0%, 90%, 0.2);}

#color-code {place: absolute; user-select: none;}

JS

operate auto_grow() {
// Editor is the primary textarea, whereas ColoredEd is the div behind it
   Editor.model.cssText = "peak: " + ColoredEd.scrollHeight +"px";
    Editor.model.width = ColoredEd.scrollWidth+"px";
console.log("resized: " + Editor.model.peak + "   " + ColoredEd.scrollHeight);
}

This code is working, however for some motive even when I sort a single character with out creating any new strains, it will increase the peak of the editor. That is additionally inflicting my editor to lag typically. What am I doing flawed?