<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;
    border-style: solid;
    border-color: midnightblue;
    border-width: 3px;
    justify-content: space-between;
  }
  
  .first-item{
    border-style: solid;
    border-width:1.5px;
    margin: 3px;
    background-color: cadetblue; 
  }
  .second-item{
    border-style: solid;
    border-width:1.5px;
    margin: 3px;
    background-color: steelblue; 
  }
  
  .third-item{
    border-style: solid;
    border-width:1.5px;
    margin: 3px;
    background-color: lightsteelblue; 
  }
    
  .fourth-item{
    border-style: solid;
    border-width:1.5px;
    margin: 3px;
    background-color: lightblue; 
  }