how to vertically align css boxes

I am trying to align CSS info boxes for a medical practice website at the same heightscreen shot the first two boxes appear fine except for the last one. i want the boxes to appear align at the same height. i have tried many techniques but none of the seem to get the boxes aligned at the same height.

This is the isolated HTML code together with the css.

.box1 {
  color: #314370;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
}

.box2 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

.box3 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

<center>
  <div class="box1" id="info"><img src="images/clock.png" width="100px"><br><b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="box2"><img src="images/s3.png" width="100px"><br><b style="color:#223a66"></b>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="box1"><img src="images/mail.png" width="100px"><br><b>Contact Us:</b><br>
    <p style="color:##223a66;"><b>---@-----.---</b></p>
    <p style="color:##223a66;"><b> Call: ---</p>
</b></p>
    <!--<p style="color:grey;">
          Make Enquiries=<br>-->



  </div>
  </div>
</center>

Solution

You can get elements which are display-inline to line up in the way you want by adding

vertical-align: top

.box1,
.box2,
.box3 {
  vertical-align: top;
}

.box1 {
  color: #314370;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
}

.box2 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

.box3 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

<center>
  <div class="box1" id="info"><img src="images/clock.png" width="100px"><br><b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="box2"><img src="images/s3.png" width="100px"><br><b style="color:#223a66"></b>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="box1"><img src="images/mail.png" width="100px"><br><b>Contact Us:</b><br>
    <p style="color:##223a66;"><b>---@-----.---</b></p>
    <p style="color:##223a66;"><b> Call: ---</p>
</b></p>
    <!--<p style="color:grey;">
          Make Enquiries=<br>-->



  </div>
  </div>
</center>