JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="display-panel" id="left">
        <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nostrum pariatur odit voluptas ipsa quas beatae accusantium sint quam omnis atque quidem maxime laudantium sapiente doloremque impedit commodi earum dolores.</span>
        <span>Illo omnis quaerat numquam voluptates voluptas laudantium quis iusto ratione nam vel quam consectetur excepturi exercitationem mollitia nisi doloribus quae officiis sed dolorum enim sequi. Officiis dolor incidunt doloremque autem.</span>
        <span>Expedita cum incidunt dolorum sequi dignissimos inventore eos repellat quasi libero tenetur voluptate nemo assumenda cupiditate deserunt illum asperiores rem. Magni cum eum aliquid veniam quam nihil natus voluptatem deleniti!</span>
        <span>Similique beatae autem quos ratione veritatis consequatur sunt commodi delectus neque impedit nesciunt doloribus quasi quam repellendus suscipit. Modi recusandae animi dolor consequatur mollitia vero consectetur dolorum officia non cupiditate!</span>
        <span>Quaerat quis nihil dolor commodi facilis repudiandae ex accusantium assumenda facere temporibus eum aperiam in. Exercitationem aliquid totam veritatis aliquam eligendi culpa similique accusantium assumenda odio hic ea nam error.</span>
        <span>Hic dolorem magnam voluptate consequatur aspernatur facilis praesentium quae veniam deserunt eligendi adipisci assumenda fugit illum nemo maiores perspiciatis consequuntur reiciendis dolore eveniet perferendis totam et dolores suscipit nisi voluptatem!</span>
        <span>Molestiae sed fugit officiis porro perferendis vel eos cum molestias distinctio optio ipsam obcaecati doloribus iusto voluptates saepe quis adipisci accusantium numquam amet culpa quibusdam dolorem vero repellat aliquam tempore?</span>
        <span>Illum dolorum doloribus similique architecto ab voluptate voluptatem vitae quidem iste eligendi dolorem vero recusandae obcaecati...

CSS

#container {
    overflow: hidden;
}

#container .display-panel {

    text-align: center;
    margin: 0 auto;
    float: left;
        -webkit-transition: width 1000ms ease-in-out;
        -moz-transition: width 1000ms ease-in-out;
        -ms-transition: width 1000ms ease-in-out;
        -o-transition: width 1000ms ease-in-out;
        transition: width 1000ms ease-in-out;
    width: 30%;
    opacity: .5;
    
}
#container .display-panel:hover {
 overflow-y: scroll;   
}
#container .display-panel.mid {
    width: 40%;
}
#container:hover .display-panel {
    width: 25%;
}

#container .display-panel:hover {
    
    width: 50%;
    opacity: 1;
}

#container #left {
    background-color: #eee;
}
#container #middle {
    background-color: #fff;
}
#container #right {
    background-color: #eee;
}

p {
    line-height: 30px;
    padding: 0 20px;
}

JavaScript

$(document).load($(window).bind("resize", listenWidth));

$('.display-panel').css({'height': (($(window).height() -20))+'px'});

function listenWidth( e ) {
    $('.display-panel') .css({'height': (($(window).height() -20))+'px'});
}