JSFiddle - React, Tailwind, and code Playground

by tobek

HTML

<p>Height is set to: <span class="set-height"></span></p>
<p>Current height is: <span class="current-height"></span></p>

<p>
    <button class="px">Set height to <span class="current-height"></span>px</button>
    <button class="auto">Set height to auto</button>
    <button class="unset">Unset height</button>
</p>
    
<div class="box">The chief difficulty Alice found at first was in managing her flamingo: she succeeded in getting its body tucked away, comfortably enough, under her arm, with its legs hanging down, but generally, just as she had got its neck nicely straightened out, and was going to give the hedgehog a blow with its head, it would twist itself round and look up in her face, with such a puzzled expression that she could not help bursting out laughing ... Alice soon came to the conclusion that it was a very difficult game indeed.</div>

CSS

div {
	display: inline-block;
	width: 300px;
	background: lime;
    overflow: hidden;
	transition: height 2s;
}

JavaScript

$('.px').click(function() {
    var height = $('div').height() + 'px';
    $('.box').height(height);
    $('.set-height').html(height);
});

$('.auto').click(function() {
    $('.box').height('auto');
    $('.set-height').html('auto');
});

$('.unset').click(function() {
    $('.box').height('');
    $('.set-height').html('');
});

setInterval(function() {
    $('.current-height').html($('.box').height());
}, 50);