title: Making a dragbar to resize divs inside CSS grids
body: <p>I have 2 boxes and a vertical div line in one unique container div (code and fiddle below).</p>
  
  <p>I'm using CSS grids to position my elements inside the container</p>
  
  <p>What I'd like to accomplish is to use the vertical line to resize horizontally the two boxes based on the position of the vertical line.</p>
  
  <p>I apologize if the question is noobish, I am new to web development, only used Python before, already tried to google and stackoverflow search but all solutions seem overly complicated and generally require additional libraries, I was looking for something simpler and JS only.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="box a"&gt;A&lt;/div&gt;
    &lt;div class="handler"&gt;&lt;/div&gt;
    &lt;div class="box b"&gt;B&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    margin: 40px;
  }
  
  .wrapper {
    display: grid;
    grid-template-columns: 200px 8px 200px;
    grid-gap: 10px;
    background-color: #fff;
    color: #444;
  }
  
  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
    resize: both;
  }
  
  .handler{
      width: 3px;
      height: 100%;
      padding: 0px 0;
      top: 0;
      background: red;
      draggable: true;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/gv8Lwckh/6/" rel="noreferrer">https://jsfiddle.net/gv8Lwckh/6/</a></p>