JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="collection__item-inner__2Juef">


<div class="collection__item-inner-content__32oRI">
blablabla
</div>


</div>

CSS

.collection__item-inner-aside__5YNe1 img { max-width: 200px; }

.collection__item-inner-aside__5YNe1 {
    position: relative;
    width: 100%;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.collection__item-inner-content__32oRI {
    height: 300px;
    background-color: blue;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    word-break: break-word;
}

.slick-next, .slick-prev {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    padding: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    border: none;
}

JavaScript

$(document).ready(function() {
var divHeight = $('.collection__item-inner-content__32oRI').height(); 
$('.slick-next, .slick-prev').css('top', divHeight-'px');
});  


$('.collection__item-inner-content__32oRI').height(function(_,v) { 
return v/2; 
});