* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #f2f2f2;
  font-family: Arial, sans-serif;
}


.page {
  max-width: 900px;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.row {
  display: flex;
  gap: 15px;
  padding: 10px;
  border: 2px solid #000;
  background: #f2f2f2;
}


.box {
  background: #0066ff;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  min-height: 60px;
  flex: 1;
}

.row2 .wide-center { flex: 2; }
.row3 .narrow-center { flex: 0.6; }
.row3 .box:not(.narrow-center) { flex: 1.3; }

.row4 .small {
  flex: 0 0 80px;
  height: 60px;
}
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }

.row5 {
  align-items: stretch;
  min-height: 250px;
}
.bar-vertical {
  flex: 0 0 60px;
}
.stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stack .box {
  flex: 0 0 60px;
  align-self: flex-start;
  width: 60px;
}
.stack .box:nth-child(2) {
  align-self: center;
  width: 80px;
}
.stack .box:nth-child(3) {
  align-self: flex-end;
  width: 60px;
}