var container = document.querySelector('.js-flex-container'),
    containerRow = container.querySelector('.js-flex-row'),
    oldX = 0,
    oldY = 0,
    rect = container.getBoundingClientRect(),
    mouseupEvent = new MouseEvent('mouseup'),
    newDiv,
    colCount,
    captureMouseMove = function captureMouseMove(event){
        var directionX = 0,
            directionY = 0;

        if ((event.clientX - rect.left) > oldX) {
            // "right"
            newDiv.style.width = oldX + 'px';

            if (oldX >= Math.round(rect.right / colCount)) {
                container.dispatchEvent(mouseupEvent);
            }
        }

        oldX = (event.clientX - rect.left);
    };

container.querySelector('.js-flex-column').addEventListener('mousedown', function(event){
    var colWidth = event.clientX - rect.left,
        columns = container.querySelectorAll('.col');

    colCount = columns.length + 1;

    newDiv = document.createElement('div');
    newDiv.className = 'col-x';
    columns[0].parentNode.insertBefore(newDiv, columns[0]);
    container.addEventListener('mousemove', captureMouseMove);
});

container.addEventListener('mouseup', function(){
    console.log('mouseup');

    if (typeof newDiv !== 'undefined') {
        newDiv.style.width = '';
        newDiv.className = 'col col-' + colCount;
        container.removeEventListener('mousemove', captureMouseMove);
    }
});