JSFiddle - React, Tailwind, and code Playground

by xie cg

HTML

<div class="wrapper flex-grow">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
    </div>

CSS

.wrapper {
            display: -webkit-flex;
            display: flex;
            width: 660px;
            background-color: #eee;
        }
        .wrapper div {
            width: 100px;
            height: 100px;
            text-align: center;
        }
        .wrapper div:nth-child(1){
            background: rgb(0, 137, 250);
        }
        .wrapper div:nth-child(2) {
            flex-grow: 1;
            width: 120px;
            background: rgb(251, 6, 6);
        }
        .wrapper div:nth-child(3) {
            flex-grow: 2;
            width: 130px;
            background: rgb(0, 188, 212);
        }
        .wrapper div:nth-child(4){
            background: rgb(233, 30, 99);
        }
        .wrapper div:nth-child(5){
            background: rgb(0, 150, 136);
        }