How to resize two divs side by side like windows explorer

Question

Hi I must create a page that RightCol must be resizable like windows explorer window. The size of each column must equal to the height of the browser. By resizing the browser, these two column must be resized.

My code don't work correctly. could an one help me , please?

/**jquery :**/

$("#LeftCol").resizable({
  maxHeight: 250,
  maxWidth: 900,
  minHeight: 150,
  minWidth: 200
});

$('#LeftCol').resize(function () {
  $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
});
$(window).resize(function () {
  $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
  $('#LeftCol').height($("#parent").height());
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
#parent {
  position: relative;
  min-height: 300px;
  margin: 0;
  padding: 0;
  width: 100%;
}

#LeftCol {
  position: relative;
  float: right;
  min-height: 400px;
  width: 65%;
  background-color: #A2A;
  overflow:auto;
}

#RightCol {
  position: relative;
  float: right;
  min-height: 400px;
  width: 35%;
  background-color: #BBB;
  overflow:auto;
  max-height:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="parent">
  <div id="RightCol"></div>
  <div id="LeftCol"></div>
</div>

Answer 1

I would set one to be resizable and the other one to be a flexbox.

https://codepen.io/anon/pen/YjJBZm

I took one of the answers already given and tried it out in this pen. Some adjustments were made.

HTML

#parent {
  display: flex;
  border: 1px solid #000;
  height: 75vh;
  width: 100%;
}

#LeftCol {
  flex-grow: 1;
  border: 1px solid red;
  resize: horizontal;
  overflow: auto;
}

#RightCol {
  flex-grow: 3;
  border: 1px solid red;
}

<div id="parent">
  <div id="LeftCol">LeftCol</div>
  <div id="RightCol">RightCol</div>
</div>

Answer 2

Solution using pure css Flexbox Layout http://codepen.io/gmrash/pen/epaqva

#parent {
  display: flex;
  border: 1px solid #000;
  height: 100vh;
}

#LeftCol {
  flex-grow: 3;
  border: 1px solid red;
}

#RightCol {
  flex-grow: 1;
  border: 1px solid red;
}

<div id="parent">
  <div id="LeftCol">LeftCol</div>
  <div id="RightCol">RightCol</div>
</div>