JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="redBack">
   <div id="arrow">A</div>
   <div id="toggle_view">view more</div>
   <div id="content1"> this is any thext</div>
   <div id="content2"> this is any thext</div>
   <div id="content3"> this is any thext</div>
   <div id="content4"> this is any thext</div>
    </div>
</div>

CSS

#main {
    overflow-y:hidden;
    height:0px;
    position:relative; 
    padding-top:20px;
}
#main.expanded{
  height: 100px;
}
#arrow {
    position:absolute;
    top:0px;
}
#toggle_view{
    position:absolute;
    right:0;
    bottom:0;
}
.redBack{
    background-color:red;
}
}

JavaScript

$(function(){
    $('#toggle_view').click(function(){
                            $('#main').addClass('expanded');
});
$('#arrow').click(function(){
                            $('#main').removeClass('expanded');
})});