<div class="container">
<div class="item-1">125px</div>
<div class="item-2">125px</div>
<div class="item-3">125px</div>
<div class="item-4">125px</div>
</div>
.container {
display:flex;
border: 1px solid #111;
width:500px;
height:200px;
}
.container > div {
height:100px;
display:flex;
justify-content:center;
align-items:center;
flex:1;
}
.item-1 {
width:100px;
background-color:coral;
}
.item-2{
width:125px;
background-color:chocolate;
}
.item-3{
width:75px;
background-color: violet;
}
.item-4{
width:50px;
background-color:orange;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.