JSFiddle - React, Tailwind, and code Playground

by mannemvamsi

HTML

<div id= "main">
    
    <div id = "content">
        <p> My content line 1</p>
        <p> My content line 2</p>
        <p> My Content line 3</p>
    </div>
    <div id = "footer">
        Footer 
        <button id = "btn">Button</button>
    </div>
    
</div>

CSS

#main{
    min-height:100px;
    border:1px solid grey;
    height:100%;
}
#content {
    border:1px solid black;
    display:block;
    overflow:hidden;
    overflow-y: scroll;
}
#footer {
    border: 1px solid blue;
    display:block;
    bottom:0;
}

JavaScript

$(function () {

    $('#btn').click(function(){
   
        $('#content').css("height", "100px");
    });
   
})