jQuery UI sortable's placeholder pushes elements under it

I'm working on a concept for a image manager in a webshop system. Part of the requirements is that on product level you can upload images for that product and by dragging (sorting) the images you can choose the order in which the images are displayed on the product page.

My problem is that I use a placeholder for the element that is being dragged, and that element is pushing to the elements on the next line/row of images.

Sortable code:

$('.product-image-manager').sortable({
    handle: '.fa-arrows',
    helper: 'clone',
    items: '> .image-container',
    placeholder: 'image-placeholder',
    start: function(event, ui) {
        ui.placeholder.height(ui.item.height());
        ui.placeholder.html('<div class="inner-placeholder"></div>');
    }
});

Full example

You just need to change this:

.product-image-manager > .image-container {
    padding: 8px;
    float: left;
    vertical-align: top;
}

To this:

.product-image-manager > .image-container {
    padding: 8px;
    display: inline-block;
    vertical-align: top;
}