<div class="flex-container">
<div class="box box-1">Item 1</div>
<div class="box box-2">Item 2</div>
<div class="box box-3">Item 3</div>
<div class="box box-4">Item 4</div>
</div>
body {
margin: 20px;
font-sixe:24px;
line-height:30px;
color:#fff;
}
.flex-container {
display: flex;
flex-direction: row-reverse;
}
.box {
text-align: center;
width: 100px;
height:50px;
margin: 0 5px;
}
.box-1 {
width:50px;
background: #ff0000;
}
.box-2 {
width:70px;
background: #da2cab;
}
.box-3 {
width:90px;
background: #008000;
}
.box-4 {
background: #0000ff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.