JSFiddle - React, Tailwind, and code Playground

by locally

HTML

<script src="https:////malsup.github.io/jquery.cycle2.js"></script>
<script src="https://malsup.github.io/min/jquery.cycle2.carousel.min.js"></script>
<div class='table'>
    <div class='row'>
        <div class='cell left'>
            <div id='slideshow-1' class="cycle-slideshow" data-cycle-timeout="0"  data-cycle-auto-height="800:500">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Concesionario_de_Mercedes-Benz%2C_M%C3%BAnich%2C_Alemania%2C_2013-03-30%2C_DD_27.JPG/500px-Concesionario_de_Mercedes-Benz%2C_M%C3%BAnich%2C_Alemania%2C_2013-03-30%2C_DD_27.JPG" />
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Volokolamsk_pamyatnik_vzryv_11_geroyam_saperam_003.jpg" />
            </div>
        </div>
        <div class='cell right'>
            <div class="entry">
                <ul>
                    <li>Vestimun frenus holium</li>
                    <li>Yorel killernerd trings truist</li>
                </ul>
                <p>&nbsp;</p>
            </div>
        </div>
    </div>
    <div class='cell'>
        <div id="slideshow-2">
            <div id="cycle-2" class="cycle-slideshow"  data-cycle-timeout="0" data-cycle-prev="#slideshow-2 .cycle-prev" data-cycle-next="#slideshow-2 .cycle-next"  data-cycle-fx="carousel" data-cycle-carousel-visible="5" data-cycle-carousel-fluid=true data-allow-wrap="false" style="position: relative; overflow: hidden;">
                <img width="50px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Concesionario_de_Mercedes-Benz%2C_M%C3%BAnich%2C_Alemania%2C_2013-03-30%2C_DD_27.JPG/500px-Concesionario_de_Mercedes-Benz%2C_M%C3%BAnich%2C_Alemania%2C_2013-03-30%2C_DD_27.JPG" />
                <img width="50px" src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Volokolamsk_pamyatnik_vzryv_11_geroyam_saperam_003.jpg" />
                </div> <a href="#" class="cycle-prev hideatstart"><< </a>
 <a href="#" class="cycle-next hideatstart">...

CSS

img {
    width: 100%;
    height: auto;
    display: block;
}
.table {
    display: table;
    overflow: hidden;
}
.cell {
    display: table-cell;
    border: 1px solid black;
    vertical-align: top;
    overflow:hidden;
}
.row {
    display: table-row;
}
.left {
    width: 50%;
}
.left .bigimage {
    width:100%;
    height: auto;
}
.right {
    width: 10%
}
#slideshow-2 img {width: 50px!important; height: auto;}

JavaScript

jQuery(document).ready(function ($) {


    var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function (e, opts) {
        // advance the other slideshow
        slideshows.not(this).cycle('goto', opts.currSlide);
    });

});