JSFiddle - React, Tailwind, and code Playground

HTML

<div class="buttons">
    <input type="radio" name="col" value="col-1"/> One
    <input type="radio" name="col" value="col-2"/> Two
    <input type="radio" name="col" value="col-3"/> Three
</div>
<div class="container">
    <div id="col-1" class="col" style="color: #900">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lorem urna, interdum vitae diam id, sagittis posuere justo.</p>
    </div>
    <div id="col-2" class="col" style="color: #090">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lorem urna, interdum vitae diam id, sagittis posuere justo. Ut sapien est, cursus in ipsum at, molestie mollis risus. Cras eu ligula sit amet ipsum consequat tincidunt. Praesent a fringilla erat. Donec gravida tellus eros, eget interdum massa ullamcorper ac.</p>
    </div>
    <div id="col-3" class="col" style="color: #009">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lorem urna, interdum vitae diam id, sagittis posuere justo. Ut sapien est, cursus in ipsum at, molestie mollis risus.</p>
    </div>
</div>

CSS

.buttons {
    padding: 10px;
}
.container {
    border: 1px solid #999;
    width: 260px;
    /* to clear float */
    overflow: hidden;
}
.col {
    width: 100%;
    float: left;
    margin-right: -40%;
}
p {
    margin: 0;
    padding: 10px;
}

JavaScript

$('input').click(function(e) {
    var id = $(this).attr('value');
    $('#' + id).css({visibility: 'visible'}).siblings().css({visibility: 'hidden'});
});
$('input:first').click();