JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">
    <ul>
        <li><a class="link" href="#one" id="one">one</a></li>
        <li><a class="link" href="#two" id="two">two</a></li>
        <li><a class="link" href="#three" id="three">three</a></li>
    </ul>
</div>
<div class="right">
    <div class='tab' id="one-details">Details 1</div>
    <div class='tab' id="two-details">Details 2</div>
    <div class='tab' id="three-details">Details 3</div>
</div>

CSS

.left {
    width:45%;
    border:1px solid black;
    float:left;
}
.right {
    height: 100px;
    width:50%;
    border:1px solid black;
    float:right;
}

.tab {

    display:none;

}

JavaScript

$(document).ready(function () {

    $('.link').on('click', function (e) {
       
        e.preventDefault();
        
        var id = $(e.target).attr('id');
                
        $('.tab').hide();
        
        $('#' + id  + '-details').show();
    
    
    });
    
});