Resize the codemirror textraea editor according to the browser/window screen

I am following the link https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-make-two-divs-side-by-side-with-the-same-height to make two div box. I have updated the approach suggested by https://stackoverflow.com/a/54632850/10220825 . Initially it is 50% ratio to both div box size. After submitting the form it is not coming 50% ratio. See below output after submitting the form.

<div class="flex-container">
     <div class="column">   
          <textarea id="editor" ></textarea>
          <script>
            var cm = CodeMirror.fromTextArea(document.getElementById('editor'),{mode:"text/x-java",lineNumbers:true})           
           // cm.setSize("800", "500");</script>
       </div> 
     <div class="column bg-alt">
            <textarea id="editor2" ></textarea> 
            <script>
                var cm2 = CodeMirror.fromTextArea(document.getElementById('editor2'),{
                mode:"text/x-java"  });
                //cm2.setSize("800", "500")               
            </script>
    </div>
</div>

How to make my both div box size or codemirror textarea sizes fixed with the browser/desktop screen after the form submitted. Here is mine output after submitting the of above code: