<div class="container1">
    <div class="box a">AAAA</div>
    <div class="box b">BBBBBBBB</div>
    <div class="box c">CCCCCCCCCCCCCCCCCC</div>
  </div>

 <div class="container2">
    <div class="box aa">AAAA</div>
    <div class="box bb">BBBBBBBB</div>
    <div class="box cc">CCCCCCCCCCCCCCCCCCCCCCCCCC</div>
  </div>

 <div class="container3">
    <div class="box aaa">AAAA</div>
    <div class="box bbb">BBBBBBBB</div>
    <div class="box ccc">CCCCCCCCCCCCCCC</div>
  </div>

.container1 {
  display:flex;
  margin-bottom : 10px;

}

.container2 {
  display:flex;
    margin-bottom : 10px;

}

.container3 {
  display:flex;
}
.a,.b,.c {
  flex-basis: 200px;

}
.b{
  flex-shrink:2;}
.aa,.bb,.cc {
  width: 200px;
}
.a, .aa, .aaa{
  background-color: lightblue;


}
.b , .bb ,.bbb{
  background-color: lightsalmon;
}

.c, .cc ,.ccc{
  background-color: gold;

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.