JSFiddle - React, Tailwind, and code Playground

by lennyekberg

HTML

<span class="wrapper">
    <span class="block red" style="height:200px">The red box's height can be dynamic too ;)</span>
    <span class="block green" style="height:10em">The green box's height is dynamic</span>
</span>

CSS

.wrapper {
    display: inline-block;
    white-space: nowrap;

    border: 2px solid #007EFD;
}

.block {
    width: 180px; /* Can vary too */
    padding: 30px 5px 5px;
    margin: 5px 2px;
    
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    text-align:center;

    font: 12px/1.5 Arial, sans-serif;
    
    color: #FFF;
}

.red {
    background: #EA3836;
}
.green {
    background: #38AB36;
}

/* Use this in Conditional Comments for IE if you need block-level `.block`s */
/*
.block {
    zoom: 1;
    display: inline;
}
*/