title: Change width proportions of two blocks with a slider
body: <p>I'm trying to design a component in which you could change the width proportions of two blocks by moving a slider left and right:
  <a href="https://i.stack.imgur.com/Q85ab.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q85ab.png" alt="enter image description here" /></a></p>
  <p><a href="https://codepen.io/anon/pen/jRMryb" rel="nofollow noreferrer">codpen</a> and demo:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer {
    display: flex;
    flex-direction: row;
  }
  
  .block {
    height: 200px;
    width: -webkit-calc(50% - 5px);
    width: -moz-calc(50% - 5px);
    width: calc(50% - 5px);
  }
  
  .block-1 {
    background-color: red;
  }
  
  .block-2 {
    background-color: green;
  }
  
  .slider {
    line-height: 100%;
    width: 10px;
    background-color: #dee2e6;
    border: none;
    cursor: e-resize;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app"&gt;
    &lt;div class="outer"&gt;
      &lt;div class="block block-1"&gt;
        Block 1
      &lt;/div&gt;
      &lt;div class="slider"&gt;
        S&lt;br&gt;l&lt;br&gt;i&lt;br&gt;d&lt;br&gt;e&lt;br&gt;r
      &lt;/div&gt;
      &lt;div class="block block-2"&gt;
        Block 2
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have tried using <a href="https://github.com/IsraelZablianov/draggable-vue-directive" rel="nofollow noreferrer"><code>draggable-vue-directive</code></a> and change the width of blocks based on slider position.</p>
  <p>However, it didn't work really well, since <code>draggable-vue-directive</code> set the slider to <code>position:fixed</code> which in turn messed up the block alignment.</p>
  <p>How can I make the <code>.slider</code> block horizontally draggable without setting <code>position:fixed</code>?</p>
  <p>How to correctly resize <code>Block1</code> and <code>Block2</code> when slider moves?</p>
  <p><em>Note: I'm not using <code>jQuery</code></em></p>