Flexbox hide

http://stackoverflow.com/questions/36353994/css-trasition-reposition-child-div-flexbox?noredirect=1#comment60329887_36353994

HTML

<div class="container">
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
</div>

CSS

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.icon {
  width: 50px;
  height: 50px;
  background-color: red;
  transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
  outline: 1px solid blue;
  flex-grow: 1;
}

.icon.hidden {
  width: 0px;
  flex-grow: 0.00001;
}

JavaScript

$(document).ready(function() {
  $('.icon').click(function() {
    $('.icon').not(this).each(function() {
      var item = this;
      $(item).addClass('hidden');

      window.setTimeout(function() {
        $(item).css('display', 'none');
      }, 2000);
    });
  });
});