JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="left">
        <div id="d1">Описание фильма 1</div>
        <div id="d2">Описание фильма 2</div>
        <div id="d3">Описание фильма 3</div>
    </div>
    <div class="right">
        <div class="film-name" data-id="1" id="t1">Название фильма 1<div class="close-link close">закрыть</div></div>
        <div class="film-name" data-id="2" id="t2">Название фильма 2<div class="close-link close">закрыть</div></div>
        <div class="film-name" data-id="3" id="t3">Название фильма 3<div class="close-link 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

$(".film-name").on('click',function() {
    $('#d' + $(this).data('id')).show().siblings().hide();
    $(".close-link").removeClass("open");
    $(".right, .left").addClass("open");
    $(".close", this).addClass("open");
 });
$('.close-link').on('click', function(event){
   event.stopPropagation();
   $(".right, .left, .close-link").removeClass("open");
});