JSFiddle - React, Tailwind, and code Playground

by Rene van der Lende

HTML

<div class="flex-container">
        <div class="flex-items side-bar"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
        <div class="flex-items"></div>
    </div>

CSS

*{
        margin: 0;
    }

    .flex-container{
        display: flex;
        height: 500px;
        border: 1px solid blue;
        background-color: lightgreen;
    }

    .flex-items{
        width: 100px;
        /* height: 250px; <-- REMOVE */
        height: 250px; /*added again */
        border: 1px solid red;
    }

    .side-bar{
        width: 400px;
        /* align-self: stretch;<--- REMOVE */
        height: 100%;
    }