JSFiddle - React, Tailwind, and code Playground

HTML

<div class="quick-banner">
    <div class="main-banner">
         <h2>Head 1</h2>

        <p>This is first text of first banner.</p>
    </div>
    <div class="mask-banner">
         <h2>Head HOVER 1</h2>

        <p>Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
    </div>
</div>
<div class="quick-banner">
    <div class="main-banner">
         <h2>Head 2</h2>

        <p>This is first text of first banner.</p>
    </div>
    <div class="mask-banner">
         <h2>Head HOVER 2</h2>

        <p>Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
    </div>
</div>

CSS

div.quick-banner {
    width: 440px;
    margin: 0 0 0 15px;
    position: relative;
}
div.quick-banner div.mask-banner {
    width: 420px;
    position: relative; /*Change this*/
    top: 0;
    left: 0;
    padding: 0; /*Change this*/
    text-align: center;
    height: 0; /*Add this*/
    overflow: hidden; /*Add this*/
}
div.quick-banner div.mask-banner h2 {
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.8);
    margin: 0;
}
div.quick-banner div.mask-banner {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: #004f6e;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
div.quick-banner:hover div.mask-banner {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    height: auto; /*Add this*/
    padding: 10px; /*Add this*/
}
div.quick-banner div.mask-banner h2 {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
/*Change this*/
div.quick-banner:hover div.mask-banner h2, div.quick-banner:hover div.mask-banner p, div.quick-banner:hover div.mask-banner a.info {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform:...