JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<button id="button1">Fill with gibberish content</button>
<!-- main -->
<div id="wrapper">
    <div id="content">Column 1 (fluid)</div>
    <div id="sidebar">Column 2 (fixed)</div>
    <div id="cleared"></div>
</div>

CSS

#button1 {
    box-sizing: border-box;
    margin: 0 0 1em;
    width: 100%;
}
/* main */
#wrapper {
    margin-right: 200px;
}
#content {
    float: left;
    width: 100%;
    background-color: powderblue;
}
#sidebar {
    float: right;
    width: 200px;
    margin-right: -200px;
    background-color: palevioletred;
}
#cleared {
    clear: both;
}

JavaScript

$(function () {
    $("#button1").on("click", function () {
        var cl = Math.floor(Math.random() * 5) + 1,
            sl = Math.floor(Math.random() * 3) + 1;
        $.getJSON("http://www.randomtext.me/api/lorem/p-" + cl + "/20-40", function (data) {
            $("#content").html(data.text_out);
        });
        $.getJSON("http://www.randomtext.me/api/lorem/p-" + sl + "/20-40", function (data) {
            $("#sidebar").html(data.text_out);
        });
    });
});