JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
     <h3>Section 1</h3>

     <h3>Section 2</h3>

    <br />
    <br /> <a href="#sec1" class="hide">Hide</a><a href="#sec1" class="show">Show</a>
 <a href="#sec2" class="hide">Hide</a><a href="#sec2" class="show">Show</a>

    <div id="sec1" class="section">Some content</div>
    <br />
    <div id="sec2" class="section">Some more content</div>
</div>

CSS

div {
    border:2px red outset;
}
div#container {
    width:50%;
}
div.section {
    position:relative;
    width:48%;
    display:inline;
    float:left;
}
h3 {
    display:inline;
    width:48%;
    float:left;
    margin:0.65;
    text-align:center;
} a {
    display:inline;
    width:23%;
    float:left;
    margin:0.65%;
    text-align:center;
}
}

JavaScript

$(function () {
    $('a').click(function () {
        if ($(this).hasClass('hide')) {
            $($(this).attr('href')).css('visibility', 'hidden');
        } else if ($(this).hasClass('show')) {
            $($(this).attr('href')).css('visibility', 'visible');
        }
    });
});