JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text-container">
    <div class="heading"><p>Foo</p></div>    
    <div class="story"><p>BAR BAR BAR BAR BAR BAR BAR </p></div>  
</div>

CSS

body{
    padding: 0;
    margin: 0;
    
}
.text-container {
    position: relative;
    overflow: hidden;
    margin: 10px;
    margin-right: 0;
    max-width: 300px;
    
}
.heading{
    background: red;
    padding: 8px;
}

.story {
    background: red;
    padding: 8px;
    transition: opacity 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
    opacity: 0;
}

.text-container:hover .story {
    transition: opacity 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
    opacity: 1;
}