Deleting div animation

Question

I want to delete a div and have all other div's (after) within the wrapper reflow and animate (slide) nicely into their new places. At the moment it flicks around, things don't always go in the right place, and general failure on my part.

JsFiddle: http://jsfiddle.net/CUzNx/30/

HTML

<div class="container">
    <div id="item1" class="item">Test1</div>
    <div id="item2" class="item">Test2</div>
    <div id="item3" class="item">Test3</div>
    <div id="item4" class="item">Test4</div>
    <div id="item5" class="item">Test5</div>
    <div id="item6" class="item">Test6</div>
</div>

Javascript

var items = document.getElementsByClassName('item');
for(var i = 0; i < items.length; i ++)
{
    items[i].onclick = function() {
        this.classList.toggle('hide');
    }
};

CSS

.container {
    width: 500px;
}
.item {
    float: left;
    width: 48%;
    min-height: 187px;
    border: 1px solid black;
    margin: 0 1% 1em 0;
    position: relative;
    background: white;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
}
.hide {
    width: 0px;
    height: 100%;
    opacity:0;
    margin:0;
    padding:0;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

Answer 1

I had some joy using

display:inline-block;

Then in the JavaScript adding a timeout for the end of the animation, followed by a

this.style.display = none

Link here:

http://jsfiddle.net/8BSkY/

var items = document.getElementsByClassName('item');
for(var i = 0; i < items.length; i ++)
{
    items[i].onclick = function() {
        var box = this
        this.classList.toggle('hide');
        setTimeout(function(){
            box.style.display = 'none';
        },500);
    }
};

Then:

.item {
    display: inline-block;
    width: 48%;
    min-height: 187px;
    border: 1px solid black;
    position: relative;
    background: white;
    box-sizing:border-box;
    margin:1%;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
}