JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="sidebar hidden-phone">
    </div>
    <div class="content">
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
        <div>Side bar grows with content. Try it yourself by removing or adding content <br/> <br/> <br/> </div>
    </div>
</div>

CSS

.wrapper
    {
        min-height:100%;
        width:100%;
        position:relative;
        background-color:Black;
        display:inline-block;
    }
    .sidebar
    {
        width:20%;
        top:0px;
        left:0px;
        bottom:0px;
        position:absolute;
        background-color:Aqua;
    }
    .content
    {
        min-height:500px;
        width:80%;
        position:relative;
        background-color:Gray;
        float:right;
    }