JSFiddle - React, Tailwind, and code Playground

by serio

HTML

<div id='controls'>
    <button class='add'>add</button>
    <button class='remove'>remove</button>
</div>

<div id='container'>
    <div class='col'><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in libero vestibulum justo congue tempor ut non ipsum. Aenean eros leo, porta id dictum sit amet, pellentesque ac arcu. Sed molestie mi et eros dignissim laoreet. Nunc ultricies convallis tortor, fermentum ullamcorper ligula tempor quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis neque at elit porttitor interdum. Donec bibendum lorem est, at rutrum magna. Praesent tincidunt mollis molestie. Nulla et enim et massa condimentum laoreet. Vestibulum quis sapien sem. In hac habitasse platea dictumst. Integer sit amet dui sed leo pellentesque semper. Nam venenatis lacinia tincidunt. Etiam rutrum aliquet enim malesuada rhoncus. In luctus orci vitae libero dapibus dapibus.</p></div>
</div>

CSS

body
{
    font: 90% arial, helvetica, sans-serif;   
}

#container
{
    width: 100%;
}

#container .col
{
    display: block;
    float: left;
}

#container .col p
{
    padding: 0 10px;
    border-left: 1px solid #DDD; 
}

.clear
{
    clear: both;
}

.hidden { display: none; }

JavaScript

(function($) {
    $.fn.evenSteven = function() {
        var width = 100 / this.length;
        this.css('width', width + '%');
    };
})(jQuery);


$(function() {
    $('.col').evenSteven();
    $('#controls .add').click(add);
    $('#controls .remove').click(remove);

    function add(e) {
        $('.col:first').clone().appendTo('#container');
        $('.col').evenSteven();
    };

    function remove(e) {
        if ($('.col').length > 1) {
            $('.col:last').remove();
            $('.col').evenSteven();
        }
    };
});