Resize <div> by draggable Handle

Create resizable handles like <textarea>

Summary

1. Build a resize-handle with CSS only
2. Define actions when mouse down
3. Define actions when mouse move
4. Define actions when mouse up
5. Code #1 — #4 with VanillaJS custom element

Build a resize-handle with CSS

resize-handle { position: absolute; }
resize-handle:after { content: ' ';
  display: block; 
  width: 12px; 
  height: 12px; 
  opacity: .5; 
}

resize-handle[bottom][right] { 
  bottom: 1px; 
  right: 1px; 
  cursor: se-resize; 
}
resize-handle[bottom][right]:after {
  background: linear-gradient(
    -45deg, 
    #000 10%, #000, #0000, #0000 20%, 
    #000 20%, #000, #0000, #0000 30%, 
    #000 30%, #000, #0000, #0000 40%, 
    #000 40%, #000, #0000, #0000 50%
  )
}

Define actions when mousedown

1. Disable body scrolling, which interrupts touch moves in mobile
2. Disable text selection, unintentional action.
3. Store starting x/y position and the current width and height
4. Add mousemove, mouseup, and mouseleave listeners