JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="box"><span>flex-grow: 1</span></div>
    <div class="box"><span>flex-grow: 1</span></div>
</div>

<div class="container">
    <div class="box"><span>flex-grow: 3</span></div>
    <div class="box"><span>flex-grow: 7</span></div>
    <div class="box"><span>flex-grow: 1</span></div>
</div>

<div class="container">
    <div class="box"><span>flex-grow: 10</span></div>
    <div class="box"><span>flex-grow: 5</span></div>
    <div class="box"><span>flex-grow: 1</span></div>
</div>

<div class="container">
    <div class="box"><span>flex-grow: 5</span></div>
    <div class="box"><span>flex-grow: 10</span></div>
    <div class="box"><span>flex-grow: 25</span></div>
    <div class="box"><span>flex-grow: 50</span></div>
    <div class="box"><span>flex-grow: 99</span></div>
</div>

CSS

.container:nth-child(1) > .box { flex-grow: 1;  background-color: lightgreen; }
.container:nth-child(1) > .box:last-child { background-color: lightpink; }
.container:nth-child(2) > .box:nth-child(1) { flex-grow: 3; background-color: aqua; }
.container:nth-child(2) > .box:nth-child(2) { flex-grow: 7; background-color: orange; }
.container:nth-child(2) > .box:nth-child(3) { flex-grow: 1;  background-color: orangered;}
.container:nth-child(3) > .box:nth-child(1) { flex-grow: 10; background-color: yellow; }
.container:nth-child(3) > .box:nth-child(2) { flex-grow: 5; background-color: lightgreen; }
.container:nth-child(3) > .box:nth-child(3) { flex-grow: 1; background-color: tan; }
.container:nth-child(4) > .box:nth-child(1) { flex-grow: 5; bacground-color: pink; }
.container:nth-child(4) > .box:nth-child(2) { flex-grow: 10; background-color: aqua; }
.container:nth-child(4) > .box:nth-child(3) { flex-grow: 25; background-color: tan; }
.container:nth-child(4) > .box:nth-child(4) { flex-grow: 50; background-color: tomato; }
.container:nth-child(4) > .box:nth-child(5) { flex-grow: 99; background-color: yellow; }


body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    display: flex;
    width: 95%;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: lightyellow;
}

.box {
    height: 50px;
    background-color: lightgreen;
    border: 1px solid #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
}