JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div class='row'>
    <div class='column column1'><div> column1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante sem, laoreet vel elit vel, malesuada aliquam eros. Pellentesque sed laoreet magna. Quisque non porttitor nulla, in molestie nulla. Aenean vitae accumsan nisi. Donec porttitor, enim a lobortis lacinia, dolor sem varius est, at mattis magna nulla ac lacus. Aenean interdum augue eu vehicula tempus. Fusce in sollicitudin justo. Cras id ante vestibulum, eleifend mauris nec, viverra neque. Vivamus felis eros, fringilla eget dui sed, semper feugiat magna. Integer gravida condimentum metus vitae faucibus. Nullam sagittis mi varius, congue felis eu, luctus lotus lorem.</div></div>
        <div class='column column2'><div> column2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante sem, laoreet vel elit vel, malesuada aliquam eros. Pellentesque sed laoreet magna. Quisque non porttitor nulla, in molestie nulla. Aenean vitae accumsan nisi. Donec porttitor, enim a lobortis lacinia, dolor sem varius est, at mattis magna nulla ac lacus. Aenean interdum augue eu vehicula tempus. Fusce in sollicitudin justo. Cras id ante vestibulum, eleifend mauris nec, viverra neque. Vivamus felis eros, fringilla eget dui sed, semper feugiat magna. Integer gravida condimentum metus vitae faucibus. Nullam sagittis mi varius, congue felis eu, luctus lorem.</div></div>
        <div class='column column3'><div> column3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante sem, laoreet vel elit vel, malesuada aliquam eros. Pellentesque sed laoreet magna. Quisque non porttitor nulla, in molestie nulla. Aenean vitae accumsan nisi. Donec porttitor, enim a lobortis lacinia, dolor sem varius est, at mattis magna nulla ac lacus. Aenean interdum augue eu vehicula tempus. Fusce in sollicitudin justo. Cras id ante vestibulum, eleifend mauris nec, viverra neque. Vivamus felis eros, fringilla eget dui sed, semper feugiat magna. Integer gravida condimentum...

CSS

.row {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.column {
    display: table-cell;
}
.column.hidden {
    overflow: hidden;
}

JavaScript

$('.column').on('click', function() {
    var width = $(this).outerWidth();
    $(this).addClass('hidden').animate({width:0},1000);
    $(this).children('div').animate({'marginLeft':-width},1000);
});