JSFiddle - React, Tailwind, and code Playground

by edelman

HTML

<p><button>Change size!</button></p>
<div class="box width">
    <p>I'm not fixed width.</p>
</div>
<div class="box height">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio!</p>
</div>
<div class="box height">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio!</p>
</div>

SCSS

.box {     
    float: left;    
    -webkit-transition: all 1s ease;
    overflow: hidden;
}
.height {
    background-color: red;
    width: 300px;
    max-height: 500px;
}
.width {    
    max-width: 200px;
    height: 50px;
    background: green;    
}
.change {
    &.height {
       max-height: 0;
    }
    &.width {
       max-width: 0;
    }
}

JavaScript

$('button').on('click', function() {
    $('.box').toggleClass('change');
});