JSFiddle - React, Tailwind, and code Playground

HTML

<div class="converationHistory">
    <span>My conversation history</span>
    <div class="container">
        <input type="textarea">
        </input>
        <button class="minimize-button">
            Minimize
        </button>
        
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div class="child"></div>
        <div class="child2"></div>
        <div...

CSS

*{
    transition: all 0.345s ease-in;
}

.converationHistory {
    width: 300px;
    height: 300px;
}

input {
    height: 40px;
}

button {
    height: 50px;
    margin: 0px;
}

.container {
    overflow: auto;
    width: 100%;
}

.minimized {
    width: 200px;
    height: 200px;
    transition: all 2s;
}

/* using styles to control control styling based on container classes */
:not(.minimized) input {
    width: 200px;
    opacity: 1;
    border: 2px solid black;
    padding: 2px;
}

.minimized input {
    width: 0px;
    opacity: 0;
    border: 0px;
    padding: 0px;
}

/* Used to style filler divs */
.child {
    height: 5px;
    width: 300px;
    background-color: red;
}

.child2 {
    height: 5px;
    width: 300px;
    background-color: blue;
}

JavaScript

$('button').click(function () {
    $('div.container').toggleClass('minimized');
});