JSFiddle - React, Tailwind, and code Playground

HTML

<section>
<div id="uno">1</div>
<div id="dos">2fdfdsafdsafdsaf</div>
<div id="tres">3</div><br>
<button>Click</button>
</section>

CSS

section{
	margin:auto;
	display:block;
	text-align:center;
}

/* ALL THESE BELONG TO DIV */
section div {
	height:100px;
    width: 200px;
    display: inline-block;
}

#uno{
	background:rgba(255,229,0,1.00);
}
#dos{
	background:rgba(0,255,60,1.00);
}
#tres{
	background:rgba(232,0,255,1.00);
}

@keyframes hide-animation {
  to {
    width: 0%;
    visibility: hidden;
  }
}

.hidden {
   animation: hide-animation .3s linear forwards;
}

JavaScript

// find element just once, no need
    // to search by id every time
    div = $('#dos'); 

    $('button').click(function(){
	    if(div.hasClass("hidden")){
            div.removeClass('hidden');
		}
	    else{
            div.addClass('hidden');
        }	
	})