JSFiddle - React, Tailwind, and code Playground

by Andreu

HTML

<section class="collection products layout-a"><div class="item"><div class="table"><div class="table-row"><a class="h-padding v-padding" href="https://fotomasterltd.net/products/mirror-x-booth/"><h2>Mirror X Booth</h2><img data-lazy-load-status="initial" data-lazy-load-type="set-src" data-lazy-load-source-intermediate="https://fotomasterltd.net/wp-content/uploads/2019-01-13-foto-master-mirror-x-booth-illustration-004-28x20.png" data-lazy-load-source-final="https://fotomasterltd.net/wp-content/uploads/2019-01-13-foto-master-mirror-x-booth-illustration-004-768x556.png" title="Mirror X Booth 3D Render" alt="Mirror X Booth: 3D Render"><p>The Mirror X Booth is a portable magic mirror that manifests photo booth advances demanded by the events market: Incredible WOW factor with a breathtaking, 6 feet tall, all-mirror design; Pristine quality with tempered glass and an all-aluminum body; Effortless movement with smart omni wheels; Complete with the most advanced software, 24/7 support and supply of exclusive leads.</p></a><div class="table-cell"><div class="slide-able no-select"><div class="video slide cover clip-right" data-active=""><video data-lazy-load-status="final" data-lazy-load-type="append-source-tags" data-lazy-load-parameters="[{&quot;type&quot;:&quot;video/webm&quot;,&quot;src&quot;:&quot;https://fotomasterltd.net/wp-content/uploads/2019-02-21-foto-master-mirror-x-booth-background-1920x1080.webm&quot;},{&quot;type&quot;:&quot;video/mp4&quot;,&quot;src&quot;:&quot;https://fotomasterltd.net/wp-content/uploads/2019-02-21-foto-master-mirror-x-booth-background-1920x1080.mp4&quot;}]" loop="" muted="" webkit-playsinline="" playsinline="" autoplay="" data-autoplay="" preload="none" title="Mirror X Booth: Highlights Video"><source src="https://fotomasterltd.net/wp-content/uploads/2019-02-21-foto-master-mirror-x-booth-background-1920x1080.webm" type="video/webm"><source...

CSS

section.collection.products.layout-a>.item {
    border-bottom: 1px solid #808080;
}
section.collection.products.layout-a>.item>div.table {
    display: table;
    width: 100%;
}
section.collection.products.layout-a>.item>div.table>div.table-row {
    display: table-row;
    width: 100%;
}
section.collection.products.layout-a>.item>div.table>div.table-row>a:nth-child(1) {
    width: 45%;
    padding-right: 2vw;
    text-align: left;
}
section.collection.products.layout-a>.item>div.table>div.table-row>* {
    display: table-cell;
    vertical-align: top;
}
button, a[href], input[type=submit], [data-click-trigger], .clickable {
    cursor: pointer;
    background-color: transparent;
}

.v-padding {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

section.collection.products.layout-a>.item>div.table>div.table-row>a:nth-child(1)>h2 {
    line-height: 1.3em;
    font-size: 1.8rem;
    text-transform: uppercase;
}
section.collection.products.layout-a>.item>div.table>div.table-row>a:nth-child(1)>img {
    width: 100%;
    min-height: 8rem;
}
section.collection.products.layout-a>.item>div.table>div.table-row>a:nth-child(1)>p {
    margin-top: 1rem;
    line-height: 1.6em;
    font-size: 1.1rem;
}

section.collection.products.layout-a>.item>div.table>div.table-row>div.table-cell:nth-child(2) {
    height: 480px;
    position: relative;
    width: 55%;
}
section.collection.products.layout-a>.item>div.table>div.table-row>div.table-cell:nth-child(2)>.slide-able {
    position: static;
    width: 100%;
    height: 100%;
    min-height: 640px;
}


section.collection.products.layout-a>.item>div.table>div.table-row>div.table-cell:nth-child(2)>div>* {
    width: 100%;
}

.slide-able>.slide[data-active] {
    z-index: 1;
    opacity: 1;
}

section.collection.products.layout-a>.item>div.table>div.table-row>div.table-cell:nth-child(2)>div video {
    background: rgb(38,38,38);
}

.video>video {
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}