JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <h1>Test slideUp - slideDown</h1>
    <p>Ceci est la section "article"</p>
    <p>Merci pour votre aide ! </p>
</article>
<aside>
      <header>
            <h3><span id="contact-toggle" title="Toggle the contact form">Nous contacter</span></h3>
      </header>
        
      <div id="contact">
          <p>Le formulaire de contact</p>
      </div>

</aside>
    
<footer>Le footer</footer>

CSS

aside h3 {
    margin: 0;
    padding: 0 5%;
    color: #FFF;
    font-size: 1.5em;
    border-bottom: rgb(89, 20, 44) solid 1px;
}

aside h3 span#contact-toggle {
    color: rgb(89, 20, 44);
    padding: 2px 1%;
    border-left: rgb(89, 20, 44) solid 5px;
}

#contact {
    position: relative;
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
    background: rgb(211, 211, 211);
    border-bottom: rgb(89, 20, 44) solid 1px;
}

JavaScript

$(document).ready(function(){ 
 
    /* *********************************** */
	/* Contact form toggle */
	/* ********************************** */
	
    jQuery("#contact-toggle").on("click", function() {
        $("#contact").animate({height:"toggle"}, 500)
    });    
});