Horizontally resize the div by dragging an edge of div

Question

I have an application built using angular2 and my web page content is divided into two panels as columns. I need to implement a functionality to be able to resize both panels by selecting either right edge of left panel or by selecting left edge of right panel.

Please let me know if there is a way to achieve this using angular or html,css or javascript.

I know css3 has resize property but this allows you to resize by holding one corner of div and not looking for this feature

Example: I want to implement similar functionality as w3schools HTML editor ( https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default )

If we open above url we can resize both left and right panels by dragging the middle bar horizontally. Please refer below screenshot

Answer 1

Take a look at Resizable jQuery , for example:

$("#div1").resizable({
    handles: 'e, w'
});