JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <div id="esquerda">
        <button value="add" name="add"><b>Adicionar Item</b></button>
        <button value="editar" name="editar"><b>Editar Item</b></button>
        <button value="opc" name="opc"><b>Opção</b></button>
        <button value="opc" name="opc"><b>Opção</b></button>
        <button value="opc" name="opc"><b>Opção</b></button>
    </div>
    <div id="direita">
        <div id="staus">
            
        </div>
        Opções
    </div>
</article>

CSS

section {
    margin-top:10px;
    margin-bottom:10px;
    overflow: hidden;
    padding:10px;
}

#esquerda {
    width:20%;
    float:left;
}
#esquerda span {
    display: block;
    padding:5px;
    text-align:justify;
    font-family: Verdana, Geneva, sans-serif;
    font-size:18px;
    border-right:5px solid rgba(0,0,0,1);
    background-color: rgba(153,153,153,1);
}

#direita {
    width:75%;
    background-color:rgba(153,153,153,1);
    float:right;
    padding:5px;
}

JavaScript

$(document).ready(function(){
    //$('#direita').hide();
    $('button').click(function(e){
        var mostrar = $('button[name='+this.name+']').val();
        switch(mostrar){
            case mostrar = 'add':
                $('#direita').html('');
                $('#direita').hide('fast');
                $('#direita').show('slow');
                $('#direita').load('adicionar_.php');
                break;
            case mostrar = 'editar':
                $('#direita').html('');
                $('#direita').hide('fast');
                $('#direita').show('slow');
                $('#direita').load('editar_.php');
                break;
            default:
                $('#direita').hide('fast');
                $('#direita').show('slow');
                $('#direita').html('Opções');
        }
    });
});