Dynamic side-by-side DIVs resize

After many attempts, I finally found this pretty simple solution to archive what I wanted to do. The div will always handle its size with its immediate neighbor.

HTML

<div class="wrapper">
    <div class="base">current</div>
    <div class="base">neighbor</div>
    <div class="base">n+1</div>
    <div class="base">n...</div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
}
.wrapper.resizing {
    overflow: hidden;
}
.base {
    overflow: hidden;
    padding: 5px;
    height: 200px;
    border: 1px solid red;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
    
}

JavaScript

$(document).ready(function () {
    var allYourBase = $(".base");
    var w = (100 / allYourBase.size()) + "%";
    allYourBase.css("width", w);

    allYourBase.filter(":not(:last-child)").resizable({
        handles: 'e',
        distance: 5,
        start: function (event, ui) {
            // just remember the total width of self + neighbor
            this.widthWithNeighbor = ui.originalSize.width + ui.element.next().outerWidth();
            // fix FF resizing issue sometimes cause div to overflow
            $(this).parent().addClass("resizing");
        },
        resize: function (event, ui) {
            // and just subtract it!
            ui.element.next().width(this.widthWithNeighbor - ui.size.width);
        },
        stop: function (event, ui) {
            // clean up, is this needed?
            delete this.widthWithNeighbor;
            $(this).parent().removeClass("resizing");
        }
    }).on('resize', function (event) {
        event.stopPropagation();
    });
});