JSFiddle - React, Tailwind, and code Playground

HTML

<div class="small-12 columns nopadding quickcontainer">
    <div class="productcat">
        <div class="producttitle">
            <p>Lorem ipsum testing layout</p>
        </div>
        <div class="productitem"></div>
        <div class="productitem"></div>
        <div class="productitem"></div>
    </div>
    <div class="productcat">
        <div class="producttitle">
            <p>Lorem ipsum testing layout dsd</p>
        </div>
        <div class="productitem"></div>
        <div class="productitem"></div>
        <div class="productitem"></div>
    </div>
    <div class="productcat">
        <div class="producttitle">
            <p>Lorem ipsum testing layout  sdad sdadsada dsadsdsadsada sdas</p>
        </div>
        <div class="productitem"></div>
    </div>
</div>

CSS

.quickcontainer {
    height:120px;
    width:2000px;
}
.productcat {
    display:inline-block;
}
.producttitle {
    background:#D1D1D1;
    display:inline-block;
    margin-left:5px;
    max-width:120px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}
.producttitle, .productitem {
    float:left;
}
.productitem, .caseitem, .vikingitem {
    height:120px;
    width:120px;
    background:white;
    display:inline-block;
    position:relative;
}
/* Colours of case studies items*/
 .quickaddcasestudies .caseitem:nth-child(1n+0) {
    background:#00ADEF !important;
}
.quickaddcasestudies .caseitem:nth-child(2n+0) {
    background:#0171BD !important;
}
.quickaddcasestudies .caseitem:nth-child(3n+0) {
    background:#043776 !important;
}
/* Colours of viking items*/
 .quickaddviking .vikingitem:nth-child(1n+0) {
    background:#D6DF22 !important;
}
.quickaddviking .vikingitem:nth-child(2n+0) {
    background:#8CC751 !important;
}
.productitem, .caseitem, .vikingitem {
    height:120px;
}
.caseitem, .vikingitem {
    width:150px;
}
.productitem .itemname, .caseitem .itemname, .vikingitem .itemname {
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    color:#000;
    padding:0 3px 7px 7px;
}
.caseitem .itemname {
    color:#fff;
}
.productitem {
    margin-right:4px;
    background:#000;
}

JavaScript

var $container = $('.producttitle');
        var $content = $('.producttitle p');
        
        $container.css({'min-width': $content.innerHeight()});
        $content.css({'max-width': $container.innerHeight()});