Redimensione uma div ao arrastar e soltar bordas sem adicionar marcações extras

Eu tenho um painel lateral absolutamente posicionado e preciso alterar sua largura arrastando essa borda. Também preciso alterar o cursor na borda do mouse. É possível fazer isso sem adicionar outra div para arrastar?

Aqui está a marcação:

#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>

Não preciso de uma solução completa. R Sim (com referência à documentação) / Não, resposta é suficiente. Eu não preciso de uma resposta com um ajudantediv. Eu já tenho um:

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>

Novamente, esta é a funcionalidade que eu quero, exceto que eu quero remover o extradiv.

questionAnswers(3)

yourAnswerToTheQuestion