Making a div box 50% for input/output


I am following the link

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>
        var cm = CodeMirror.fromTextArea(document.getElementById('editor'),{mode:"text/x-java",lineNumbers:true})           
        cm.setSize(null, "600");</script>
 <div class="column bg-alt">
        <textarea id="editor2" ></textarea> 
            var cm2 = CodeMirror.fromTextArea(document.getElementById('editor2'),{
            mode:"text/x-java"  });
            cm2.setSize(null, "600")             

Here is mine output after form has submitted: