JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">foo</div>
<span class="inner">hey</span>      
<div class="button">bar</div>
<span class="inner">hey again</span>

CSS

.inner {
        display: none;
        position:absolute;
        top:100px;
        padding:30px;
        background-color:red;
        font-size:14px;
        color:#fff;
   }
.inner:last-child{
    left:127px ;
}
   .button{
    display: inline-block;
    height:20px;
    width:70px;
    background-color:#000000;
    color:#ffffff;
    text-align:center;
    padding:20px;
    cursor:pointer;
    }
.active{
    display:block !important;
}

JavaScript 1.7

$('.button:first').click(function() {
    $('.inner:last').removeClass('active');
    $('.inner:first').addClass('active');
});
$('.button:last').click(function() {
    $('.inner:first').removeClass('active');
    $('.inner:last').addClass('active');
});