JSFiddle - React, Tailwind, and code Playground

by sstur

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-outer">
        <div class="col-inner">
            <p><strong>One</strong></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lorem urna, interdum vitae diam id, sagittis posuere justo.</p>
        </div>
    </div>
    <div id="col-2" class="col-outer">
        <div class="col-inner">
            <p><strong>Two</strong></p>
            <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>
    <div id="col-3" class="col-outer">
        <div class="col-inner">
            <p><strong>Three</strong></p>
            <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>
</div>

CSS

body {
    font-size: 10px;
    font-family: sans-serif;
}
.buttons {
    padding: 10px;
}
.container {
    border: 1px solid #999;
    width: 250px;
    /* to clear float */
    overflow: hidden;
}
.col-outer {
    width: 0;
    float: left;
    visibility: hidden;
}
.col-inner {
    padding: 10px;
    width: 230px;
}

JavaScript

$('input').click(function(e) {
    var id = $(this).attr('value');
    $('.col-outer').removeAttr('style');
    $('#' + id).css({visibility: 'visible'});
});
$('input:first').click();