JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="box upper_box">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas hendrerit iaculis sem, nec pharetra eros fermentum quis.</p> 
     
        <p class="read_more">Read more >></p>
        
        <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas hendrerit iaculis sem, nec pharetra eros fermentum quis. Donec laoreet nunc sed tincidunt convallis. Cras purus nibh, dapibus quis magna vestibulum, gravida aliquet urna.</p> 
            
            <div class="close">close</div>
        </div>
    
    </div><!-- end of box -->

    <div class="box lower_box">
    <h2>TEST</h2>
    
    </div><!-- end of box -->
</div>

CSS

.box {
    float: left;
    background-color: #ffffff;
    border: 1px solid #b3b3b3;
    width: 200px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    padding: 20px;
}

.upper_box {
    top: 0;
    z-index: 9999;
    min-height: 100px;
}

.lower_box{
    top: 142px;
    height: 100px;
}

#wrapper{
    position: relative;
}

.description{
    display: none;
}

p{
    margin:0;
    font-size: 12px;
}

JavaScript

$('.read_more').click(function() {
        
        $('.description').show( 'blind', 1000 );

    });
    
    $('.close').click(function() {
        
        $('.description').hide( 'blind', 1000 );

    });