JSFiddle - React, Tailwind, and code Playground

HTML

<h1><mark>PURE CSS</mark> Slide Up and Slide Down</h1>
<input id="toggle" type="checkbox"><label for="toggle">toggle slider</label>
<div id="wrap">
    <div id="slider">
        <p>Blah blah blah blah blah....</p>
    </div>
</div>

CSS

#wrap {
    height: 200px;
    width: 200px;
    border: 1px solid #ccc;
}
#slider {
    overflow-y: hidden;
    max-height: 200px;
    -webkit-transition: all .5s cubic-bezier(0, 1, 0.5, 1);
    transition: all .5s cubic-bezier(0, 1, 0.5, 1);
    background: pink;
    height: inherit; 
    width: inherit;
}
#toggle {
    display: none;
}
#toggle + label {
    padding: 1px 6px;
    text-align: center;
    border-radius: 2px;
    background: rgb(221, 221, 221);
    /* border: 1px outset buttonface; */
    margin-bottom: 2px;
    display: inline-block;
    cursor: pointer;
}