JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
        <div class="focus">
            <div>
                <div class="focusDetails">
                    <div class="focusTitle"></div>
                    <div class="focusDesc"></div>
                </div>
                <div class="previous" style="display:none;"><span></span>
                </div>
                <div class="next"><span></span>
                </div>
            </div>
        </div>
        <div class="sliderContainer">
            <ul class="slider">
                <li>
                    <div class="sliderImg"></div>
                    <div class="sliderDetails">

                            <p class="sliderTitle">Town Hall Meeting Presentation - Sunstar Italiana</p>
                            <p class="sliderDesc">On Tuesday, June 30 all Sunstar Italiana employees took part to the Town Hall Meeting presentation made by the General Manager, Marco Bruscaini. Through his</p>

                    </div>
                </li>
                <li>
                    <div class="sliderImg"></div>
                    <div class="sliderDetails">
 
                            <p class="sliderTitle">Top Management Visits the HQ in Etoy</p>
                            <p class="sliderDesc">The welcome to the Sunstar Headquarter June Meetings' attendees from Asia, Japan, and the US was done as a tour to the Sunstar Campus' two buildings, the new and previous one The welcome to the Sunstar Headquarter June Meetings' attendees from Asia, Japan, and the US was done as a tour to the Sunstar Campus' two buildings, the new and previous one</p>

                    </div>
                </li>
                <li>
                    <div class="sliderImg"></div>
                    <div class="sliderDetails">
                            <p class="sliderTitle">Distributor meeting</p>
                            <p class="sliderDesc">For the 3rd year we have organized our Distributor meeting taking place this...

CSS

.container {
      display: table;
      width: 100%;
      height: 100vh;
      background: lightgreen;
    }
    .focus {
      height: 500px;
    }
    .sliderContainer {
      display: table-cell;
      width: 40%;
      height: 100%;
      vertical-align: top;
      background-color: white;
    }
    .slider {
      margin: 0px;
      padding: 0px;
      list-style-type: none;
      display: table;
      height: 100%;
      width: 100%;
    }
    .slider li {
      display: table-row;
      cursor: pointer;
      height: 25vh;
      background-color: pink;
      overflow: hidden;
    }
    li .sliderImg{min-height:5vh; max-height:5vh;}
    .sliderDetails {
      border-bottom: 1px solid black;
      padding-bottom: 5px;
      min-height: 20vh;
      max-height:20vh;

      overflow-y: scroll;
      overflow-x: hidden;
    }