JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

<button>ADD</button>

CSS

#container {
    width:300px;
    border: 5px solid rgb(180, 180, 180);
    padding: 5px;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    resize: both;
    overflow: hidden;
    justify-content: space-around;
}
#container > div {
    width:50px;
    height:50px;
    background: rgb(20, 150, 230);
    margin: 5px 20px;
    transition: all 1s;
    overflow: hidden;
    resize: none;
}

JavaScript

// needed to get prefixed transitionend event
// taken from: http://stackoverflow.com/a/9090128/1937302
var transitionEnd = (function(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
})();


var container = $('#container');

container.find('div').on('click', function(){
    $(this).css({
        'margin-left': '0',
        'margin-right': '0',
        width: '0'
    }).on(transitionEnd, function(){
        $(this).remove();
    });
});

$('button').on('click', function(){
    container.append('<div style="margin-left:0;margin-right:0;width:0;">' + container.children().length + '</div>');

    setTimeout(function(){
        // needs placing in a timeout so that
        // the CSS change will actually transition
        // (CSS changes made right after inserting an
        // element into the DOM won't get transitioned)

        container.children().last().css({
        'margin-left': '',
        'margin-right': '',
        width: ''
    });
    },0);
});