JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="mainBody">
        <p>Lorem ipsum dolor sit amet, ad similique scripserit vix, dictas graecis qui cu, an vis ubique aperiri. Duo in impetus maiorum, pro dolorem alienum liberavisse an. Vim veri inani conclusionemque eu. Omnesque consequat vix id, ut sit ferri illud. Cu cum elitr eirmod, vim dolorum sadipscing ne.</p>
    </div>
    <div class="sideBar"><button>Click to add text</button></div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    width: 80%;
    margin: 0 auto;
    position: relative;
}

.mainBody {
    width: 60%;
    background: brown;
}

.sideBar {
    width: 35%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: tan;
    overflow: hidden;
}

JavaScript

$('button').on('click', function() {
   $('.mainBody').append('<p>Lorem ipsum dolor sit amet, ad similique scripserit vix, dictas graecis qui cu, an vis ubique aperiri. Duo in impetus maiorum, pro dolorem alienum liberavisse an. Vim veri inani conclusionemque eu. Omnesque consequat vix id, ut sit ferri illud. Cu cum elitr eirmod, vim dolorum sadipscing ne.</p>');
});