JSFiddle - React, Tailwind, and code Playground

by asifrc

HTML

<!-- Div Structure -->
<div id="wrapper">
    <div id="maincontent">
         <h1>Main Content</h1>

        <button id="addC">Dynamically Add Content</button>
        <br>
        <input type="text" id="w" value="100">%
        <button id="changeW">Change Wrapper Width</button>
    </div>
    <div id="sidebar">
         <h1>Sidebar</h1>

    </div>
</div>
<!-- Extra stuff -->

CSS

#maincontent {
    width: 75%;
    min-height: 300px;
    float: left;
    border: 1px solid #000;
}
#sidebar {
    width: 20%;
    min-height: 150px;
    float: right;
    border: 1px solid #000;
}

JavaScript

//Add Dynamic Content
$('#addC').click(function() {
    for (i=0; i<100; i++)
    {
        $('#maincontent').append('<p>'+i+'. Dynamic Content</p>');
    }
});
//Change Wrapper Width
$('#changeW').click(function() {
    $('#wrapper').css("width", $('#w').val()+"%");
});