JSFiddle - React, Tailwind, and code Playground

by mpsingh2003

HTML

<div class='parent'>
    <div class='child child1'>1</div>
    <div class='child child2'>2</div>
    <div class='child child3'>3</div>
    <div class='child child4'>4</div>
    <div class='child child5'>5</div>
    
    
</div>

CSS

.parent{
    display:flex;
    height:320px;
    width:320px;
    background-color:lightblue;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-content:center;
    align-items:center;
}
.child{
    width:50px;
    background-color:red;
    border:1px solid black;
    margin:5px     
}
.child1{
    height:50px;
    order:2;
}
.child2{
    height:100px;
    order:4;
}
.child3{
    height:70px;
    order:3;
}
.child4{
    order:1;
    height:20px;
    flex-grow:5
}
.child5{
    order:5;
    height:150px;
}