Изменение размера div при перетаскивании границ без добавления дополнительной разметки

У меня есть абсолютно позиционированная боковая панель, и мне нужно изменить ее ширину, перетаскивая эту границу. Также мне нужно изменить курсор на границе наведения. Можно ли сделать это без добавления другого div для перетаскивания?

Вот разметка:

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

Мне не нужно полное решение. A Да (со ссылкой на документацию) / Нет достаточного ответа. Мне не нужен ответ с помощникомdiv, У меня уже есть один:

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>

Опять же, это функциональность, которую я хочу, за исключением того, что я хочу удалить лишниеdiv.

Ответы на вопрос(3)

Ваш ответ на вопрос