JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <button id="hide">hide links</button>
    <button id="show">show links</button>
    <button id="append">append content</button>
</header>
<aside>
    <h1>Links</h1>
    <a href="#" class="link">a link</a>
    <a href="#" class="link">a link</a>
    <a href="#" class="link">a link</a>
    <a href="#" class="link">a link</a>
    <a href="#" class="link">a link</a>
    <a href="#" class="link">a link</a>
</aside>
<div id="content">
    <p>content</p>
</div>

CSS

body
header{
    border:1px solid red;
    margin-bottom:15px;
}
aside{
    border:1px solid blue;
    display:inline-block;
    width:19%;
    margin-right:2px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;       /* Opera/IE 8+ */
}
#content{    
    border:1px solid green;
    display:inline-block;
    width:80%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;        /* Opera/IE 8+ */
    vertical-align:top;
}
.link{
    margin: 0 10px;
    display:block;
}

JavaScript

$('#hide').on('click',function(){
    $('.link').hide();
});

$('#show').on('click',function(){
    $('.link').show();
});

$('#append').on('click',function(){
    $('#content').append("<p>a new content</p>");
});