title: How do you allow a user to manually resize a <div> element vertically?
body: <p>I have 2 div elements inside another div, and they are displayed as a block each. So <em>div1</em> ends up right above <em>div2</em>.</p>
  
  <p>I want to add a "bar" of some kind that the user can click and drag which will end up resizing <em>div2</em>, and <em>div1</em> will be automatically resized by the same amount.</p>
  
  <p>The parent of <em>div1</em> and <em>div2</em> has style: <code>display:flex;flex-direction:column;</code> and <em>div1</em> has <code>flex-grow:1</code> so it automatically resizes.</p>
  
  <p>I want the resize bar to be something like this: </p>
  
  <p><a href="https://i.stack.imgur.com/0sa4H.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0sa4H.png" alt="resize Bar"></a></p>
  
  <p>How do I add something like this? Also is there any way I can change the look of it in CSS?</p>