JSFiddle - React, Tailwind, and code Playground

HTML

<button id=clicky>Click me</button>

<div id=box>
    <p>One of the most widely misused terms on the Net is "ad hominem". It is most often introduced into a discussion by certain delicate types, delicate of personality and mind, whenever their opponents resort to a bit of sarcasm. As soon as the suspicion of an insult appears, they summon the angels of ad hominem to smite down their foes, before ascending to argument heaven in a blaze of sanctimonious glory. They may not have much up top, but by God, they don't need it when they've got ad hominem on their side. It's the secret weapon that delivers them from any argument unscathed.

<p>In reality, ad hominem is unrelated to sarcasm or personal abuse. Argumentum ad hominem is the logical fallacy of attempting to undermine a speaker's argument by attacking the speaker instead of addressing the argument. The mere presence of a personal attack does not indicate ad hominem: the attack must be used for the purpose of undermining the argument, or otherwise the logical fallacy isn't there. It is not a logical fallacy to attack someone; the fallacy comes from assuming that a personal attack is also necessarily an attack on that person's arguments.

<p>Therefore, if you can't demonstrate that your opponent is trying to counter your argument by attacking you, you can't demonstrate that he is resorting to ad hominem. If your opponent's sarcasm is not an attempt to counter your argument, but merely an attempt to insult you (or amuse the bystanders), then it is not part of an ad hominem argument.

</div>

CSS

#box {
    
    //height: 500px;
    background: lightgrey;
    padding: 20px;
}

p {
    margin-bottom: 10px;
    line-height: 1.5;
}

JavaScript

/**
 *   This mini scripts toggles a div with a slide up/down mechanism, but instead of incrementing the height each ms 
 *   we rely on the new CSS transition to do all the work for us.
 */ 

// Some random arbitrary variables
var box = document.getElementById('box'), // Ref of box div.
    clicky = document.getElementById('clicky'), // Ref of button
    type = 'all',    // Transition type
    duration = 200, // Transition duration
    easing = 'ease'; // Transition easing


// Function to set transition including all its prefixed brethren.
function turnOnTransition(element, type, duration, easing) {
    element.style.transition = type + ' ' + (duration/1000) + 's ' + easing;
    element.style.OTransition = type + ' ' + (duration/1000) + 's ' + easing;
    element.style.msTransition = type + ' ' + (duration/1000) + 's ' + easing;
    element.style.MozTransition = type + ' ' + (duration/1000) + 's ' + easing;
    element.style.webkitTransition = type + ' ' + (duration/1000) + 's ' + easing;
}

// And a function to turn all of them off again...
function turnOffTransition(element) {
    element.style.transition = "";   
    element.style.OTransition = "";
    element.style.OTransitionDelay = '';
    element.style.OTransitionDuration = '';
    element.style.OTransitionTimingFunction = '';
    element.style.OTransitionProperty = '';   
    element.style.msTransition = "";   
    element.style.MozTransition = "";   
    element.style.webkitTransition = "";   
}

// Function that calculates the height of the element - padding.
function getMeasurements(element) {
    var height = element.offsetHeight,
        paddingTop = window.getComputedStyle(element).getPropertyValue('padding-top'),
        paddingBottom = window.getComputedStyle(element).getPropertyValue('padding-bottom');
    return height - parseInt(paddingTop) - parseInt(paddingTop);
}

// Set height + padding to 0 and overflow to hidden
function transitionHelper(element) {
    element.style.height = '0px';     ...