JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<div class="selected">
</div>
<div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: box;
    box-orient: vertical;
}
body>div {
    min-height: 3em;
    background-color: blue;
    margin: 10px;
    
    -moz-transition: height 0.7s ease;
    -o-transition: height 0.7s ease;
    -webkit-transition: height 0.7s ease;
    transition: height 0.7s ease;
}
body>div.selected {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    background-color: red;
}

JavaScript

jQuery(function ($) {
    var panes = $('body>div')
    panes.click(function (event) {
        if (!$(this).hasClass('selected')) {
            panes.toggleClass('selected');
            event.preventDefault();
        }
    });
});