JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/jontroncoso/mutant-transition/master/src/mutant-transition.js"></script>
<ul class="example-children" data-mutant-attributes="height">
    <li>Example</li>
</ul>
<a href="#" class="add-children">Add List Items</a>
<a href="#" class="remove-children">Remove List Items</a>

CSS

ul.example-children {
    -webkit-transition: height 0.5s;
    -moz-transition:    height 0.5s;
    -ms-transition:     height 0.5s;
    -o-transition:      height 0.5s;
    transition:         height 0.5s;
    
    background: #666666;
    color: #FFFFFF;
    width: 100%;
    margin: 0 0 15px;
    padding: 15px;
    overflow: hidden;
}
ul.example-children li {
    display: block;
    margin: 10px 0;
    padding: 10px;
    background-color: rgba(0,0,0,0.5);
}

JavaScript

$('.add-children').click(function(e){
    $('.example-children').append('<li>Example</li>');
    e.preventDefault();
});
$('.remove-children').click(function(e){
    $('.example-children').children(':first-child').remove();
    e.preventDefault();
});