Making a div box 50% for input/output


#1

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.

At initially when page loads I could see the input and output box to 50% ratio. But after the form submitted, my input box get shrink inorder to fit the content of output box. I am using the codemirror textarea in both the div box. In my below source code,setSize(null, 600) i.e. setSize(width, height), If I change the width to fix number like 500, then it vary according to the browser/window screen. Please suggest how to make 50% ratio of input and output box after the form has been submitted.

<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(null, "600");</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(null, "600")             
        </script>
</div>

Here is mine output after form has submitted: