<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.