<div style="display: flex; align-items: flex-end;">
  <div style="margin-right: 20px;">
    <div class="bottle bottle--orange">
      <div class="bottle__label">オレンジ</div>
    </div>
  </div>
  <div style="margin-right: 20px;">
    <div class="bottle bottle--orange bottle--1l">
      <div class="bottle__label">オレンジ</div>
    </div>
  </div>
  <div style="margin-right: 20px;">
    <div class="bottle bottle--apple">
      <div class="bottle__label">アップル</div>
    </div>
  </div>
  <div style="margin-right: 20px;">
    <div class="bottle bottle--apple bottle--1l">
      <div class="bottle__label">アップル</div>
    </div>
  </div>
</div>

/* Block */
.bottle {
  position: relative;
  width: 80px;
  height: 100px;  
}

/* Modifier */
.bottle--orange {
  background: #ff9f43;
}

.bottle--apple {
  background: #ee5253;
}

.bottle--1l {
  height: 200px;
}

/* Element */
.bottle__label {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  font-size: 12px;
  text-align: center;
  background: #f5f5f5;
  padding: 5px 0;
}