Resize a div on border drag and drop without adding extra markup

I have an absolute positioned side panel and I need to change its width by dragging this border. Also I need to change cursor on border hover. Is it possible to do this without adding another div for dragging?

Here is the markup:

#right_panel {
    position: absolute;
    border-left: solid 3px #ccc;
    width: 100px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
}

<body>
    <div id="right_panel"></div>
</body>

I don't need a full solution. A Yes (with documentation reference)/No answer is enough. I don't need an answer with a helper div. I already have one:

var m_pos;
function resize(e){
    var parent = resize_el.parentNode;
    var dx = m_pos - e.x;
    m_pos = e.x;
    parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}

var resize_el = document.getElementById("resize");
resize_el.addEventListener("mousedown", function(e){
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
}, false);
document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);

#right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
}

#resize {
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: w-resize;
}

<body>
    <div id="right_panel">
        <div id="resize"></div>
    </div>
</body>

Again, this is the functionality I want, except I want to remove the extra div.

Solution

It is certainly possible to do this without an extra div. Use css and ::after to create the border and change the cursor. Use MouseEvent.offsetX to determine whether to process a click in the element.

In your example, you want a click on the main div, but only on the first 4 pixels. You can do that by checking for e.offsetX < 4 in your click handler:

const BORDER_SIZE = 4;
const panel = document.getElementById("right_panel");

let m_pos;
function resize(e){
  const dx = m_pos - e.x;
  m_pos = e.x;
  panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
}

panel.addEventListener("mousedown", function(e){
  if (e.offsetX < BORDER_SIZE) {
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
  }
}, false);

document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);

#right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0ff;
}

#right_panel::after {
    content: '';
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}

<body>
    <div id="right_panel"></div>
</body>