<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-flow: row wrap;
}
.first-item{
border-style:solid;
border-width: 1px;
text-align:center;
background-color: deepskyblue;
flex-basis:450px;
}
.second-item{
border-style:solid;
border-width: 1px;
text-align:center;
background-color:dodgerblue;
flex-basis: 350px;
}
.third-item{
border-style:solid;
border-width: 1px;
text-align: center;
background-color: royalblue;
flex-basis: 300px;
}
.fourth-item{
border-style:solid;
border-width: 1px;
text-align: center;
background-color:mediumblue;
flex-basis: 500px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.