JSFiddle - React, Tailwind, and code Playground

by Vladymyr Shevchuk

HTML

<div class="parent">
    <div class="child red">
        <div class="content">1</div>
    </div>
    <div class="child blue">2</div>
    <div class="child green">3</div>
</div>

CSS

.parent {
    display: flex;
    flex-direction: column;
    /* height: 100%; */
    width: 100%;
    height: 100vh;
}

.content{
    width: 800px;
    height: 100px;
}

.child {
    flex: 1;
    
}

.red {
    background: red;
}
.blue {
    background: blue;
}
.green {
    background: green;
}