JSFiddle - React, Tailwind, and code Playground

Slider with Equal Height Columns | Using CSS Display: Table

by skibulk

HTML

<div class="slider-container">
    <div class="slider-table">
        <div class="slider-td">
            <p>First Slide</p>
            <p>Lorem Ipsum</p>
            <p>Dolor Sit Amet</p>
        </div>
        <div class="slider-td">
            <p>Second Slide</p>
        </div>
        <div class="slider-td">
            <p>Third Slide</p>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.slider-container {
    width: 100%;
    overflow-x: hidden;
}

.slider-table {
    display: table;
    width: 300%;
    margin-left: -100%;
}

.slider-td {
    display: table-cell;
    width: 33.33%;
    background: lightblue;
}