JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<div class="flex-box">
    <div class="first">This is 1 </div>
    <div class="second">This is second division</div>
    <div class="third">This is third </div>
    <div class="fourth">This is fourth division</div>
</div>

<div class="flex-box">
    <div class="first">This is 1 </div>
    <div class="second">This is second This is second This is second division</div>
    <div class="third">This is third </div>
    <div class="fourth">This is fourth division</div>
</div>

<div class="flex-box">
    <div class="first">This is 1 </div>
    <div class="second">This is second division</div>
    <div class="third">This is third </div>
    <div class="fourth">This is fourth division</div>
</div>

<div class="flex-box">
    <div class="first">This is 1 </div>
    <div class="second">This is second division</div>
    <div class="third">This is third </div>
    <div class="fourth">This is fourth division</div>
</div>

CSS

.flex-box{
    display:-webkit-flex;
    width:500px;
    -webkit-flex-flow: wrap;
}
.flex-box div{
    width:150px;
    -webkit-flex:1;
}
.first{   
    background-color:rgba(220, 20 , 20, 0.60);
}
.second{
    background-color:rgba(220, 20 , 20, 0.90);
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}
.third{
    background-color:rgba(220, 20 , 20, 0.10);
}
.fourth{
    background-color:rgba(220, 20 , 20, 0.50);
}

JavaScript

//when flex is 1