<div class="box">
<div class="first-item">
<h1> 1 </h1>
</div>
<div class="second-item">
<h1> 2</h1>
</div>
<div class="third-item">
<h1> 3</h1>
</div>
<div class="fourth-item">
<h1>4 </h1>
</div>
</div>
.box{
display: flex;
flex-direction: row-reverse
}
.first-item{
border-style: solid;
border-width: 1.5px;
margin: 2px;
text-align: center;
background-color: seashell;
}
.second-item{
border-style: solid;
border-width: 1.5px;
margin: 2px;
text-align: center;
background-color: oldlace;
}
.third-item{
border-style: solid;
border-width: 1.5px;
margin: 2px;
text-align: center;
background-color: floralwhite;
}
.fourth-item{
border-style: solid;
border-width: 1.5px;
margin: 2px;
text-align: center;
background-color: ivory;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.