JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" class="enesp" value="First" />
    <input type="button" class="enmund" value="Second" />
    <div class="row" id="contactesp" style="display: none;">
        <div class="twelve columns">
            First row
        </div>
    </div>
    <div class="row" id="contactmund" style="display: none;">
        <div class="twelve columns">
            Second row
        </div>
    </div>
    <!-- Footer -->
    <footer role="contentinfo" id="content-info">
        <div class="row">Content here</div>
    </footer>

CSS

#content-info {
             background-color: #1C3F94;
             clear: both;
             color: #FFFFFF;
             float: none;
             margin: 20px -20px 0;
             padding: 0 4%;
             display:block;
         }
         #contactesp, #contactmund {
             display: block;
             height: auto;
             overflow: hidden;
         }

JavaScript

jQuery(document).ready(function() {
            $('.enesp').on('click',function(){
                $('#contactmund').hide();
                $('#contactesp').toggle();
            });
            $('.enmund').on('click',function(){
                $('#contactesp').hide();
                $('#contactmund').toggle();
            });
        });