JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="left">
        <div id="d1">Описание фильма 1</div>
        <div id="d1">Описание фильма 2</div>
        <div id="d1">Описание фильма 3</div>
    </div>
    <div class="right">
        <div id="t1">Название фильма 1<div class="close">закрыть</div></div>
        <div id="t2">Название фильма 2<div class="close">закрыть</div></div>
        <div id="t3">Название фильма 3<div class="close">закрыть</div></div>
     </div>
</div>

CSS

.content {
    display:table;
    width:100%;
    height:200px;
}
.left {
    display:table-cell;
    background:#bd0c0c;
    visibility:hidden;
    opacity:0;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.right {
    display:table-cell;
    width:80%;
    background:#0baa1a;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.right > div {position:relative;}
.close {position:absolute;top:10px;right:10px;display:none;}
.close.open {display:block;cursor:pointer;}
.right.open {width:50%;}
.left.open {visibility:visible;opacity:1;}

JavaScript

$(".right").click(function() {
	$(".right").toggleClass("open");
	$(".left").toggleClass("open");
    $(".close").toggleClass("open");
});