JSFiddle - React, Tailwind, and code Playground

by andy_h

HTML

<div class="wrapper">
    
    <article>
        
        <h1>100% height sidebar</h1>
        
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesquimperdiet semper. Integer feugiat tincidunt est in suscipit. Duis felis sem, posuere non pulvinar vel, dictum non lacus. Suspendisse eget nulla tellus. Maecenas ullamcorper risus non libero commodo commodo. Duis quis leo sed nisi molestie ultrices. Mauris in purus metus, blandit ornare neque. Nunc felis dui, faucibus vel consequat sed, iaculis in elit. Nullam placerat vestibulum nulla, in sagittis risus elementum vitae. Sed mollis est et diam rhoncus nec tempus quam aliquam.
        </p>
        
        <p>
            Morbi ut risus ante, et tempor sapien. Nullam eget nisi eros, vel dictum tortor. Duis nec libero ac quam accumsan bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In pulvinar rutrum luctus. Sed dignissim, metus quis posuere vehicula, dui odio tempus risus, malesuada aliquam tellus eros ac tortor. Cras ullamcorper quam quis eros ullamcorper a cursus odio laoreet. In condimentum, ante ut consequat viverra, quam mauris vulputate purus, ut scelerisque tortor massa at augue.
        </p>
        
        <p>        
            Proin tempor fringilla consectetur. Morbi ultricies euismod leo vitae vehicula. Mauris egestas sodales augue. Proin porttitor nibh sed risus facilisis sit amet aliquet leo pellentesque. Vivamus ut risus vel enim accumsan ultrices. Praesent a eros eu eros iaculis vulputate at ut est. In euismod lectus quis justo mollis tempor et vel augue. Nulla erat sapien, consequat sagittis porttitor nec, tristique vel lectus. Phasellus at mollis quam. Duis augue metus, convallis eu aliquet ut, ultrices at turpis.
        </p>
        
        <p>
            Morbi a sapien eget enim adipiscing cursus. Pellentesque rhoncus magna in mauris dignissim consequat. Sed id lectus vel enim ullamcorper placerat....

CSS

aside{
    background:yellow; 
    float:right;
    height:100%; 
    margin:50px 0 -5000px 0; /*this*/ 
    padding:2% 2% 5000px 2%; /*and this*/
    width:26%;
}
.wrapper{
    font:normal 14px/1.3 sans-serif; 
    margin:3%; 
    width:94%; 
    height:94%; 
    overflow:hidden;
}
article{
    float:left; 
    padding:0 3% 0 0; 
    width:67%;
}
h1{
    font:bold 30px/1.3 sans-serif; 
    margin:0 0 15px 0;
}
p{
    margin:0 0 15px 0;
}

JavaScript

//100% height sidebar