<div class="flex-container">
  <div class="box box-1">Item 1</div>
  <div class="box box-2">Item 2</div> 
  <div class="box box-3">Item 3</div> 
  <div class="box box-4">Item 4</div> 
</div>
body {
  margin: 20px;
  font-sixe:24px;
  line-height:30px;
  color:#fff;
}
.flex-container {
  display: flex;
}
.box {
  text-align: center;
  width: 100px;
  height:50px;
  margin: 0 5px;
}
.box-1 {
  width:50px;
  background: #ff0000;
}
.box-2 {
  width:70px;
  background: #da2cab;
}
.box-3 {
  width:90px;
  background: #008000;
}
.box-4 {
  background: #0000ff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.