1
<!doctype html>
2
<title>Example</title>
3
<style>
4
.wrapper {
5
  display: flex;
6
}
7
.wrapper > div {
8
  font-size: 4vh;
9
  color: white;
10
  background: darkslategray;
11
  margin: .1em;
12
  padding: .3em;
13
  border-radius: 3px;
14
  flex: 1;
15
}
16
.wrapper:nth-child(2) > div:nth-child(1),
17
.wrapper:nth-child(12) > div:nth-child(2) {
18
  flex: 1;
19
  }
20
.wrapper:nth-child(2) > div:nth-child(2),
21
.wrapper:nth-child(12) > div:nth-child(1) {
22
  flex: 11;
23
  }
24
.wrapper:nth-child(3) > div:nth-child(1),
25
.wrapper:nth-child(11) > div:nth-child(2) {
26
  flex: 2;
27
  }
28
.wrapper:nth-child(3) > div:nth-child(2),
29
.wrapper:nth-child(11) > div:nth-child(1) {
30
  flex: 10;
31
  }
32
.wrapper:nth-child(4) > div:nth-child(1),
33
.wrapper:nth-child(10) > div:nth-child(2) {
34
  flex: 3;
35
  }
36
.wrapper:nth-child(4) > div:nth-child(2),
37
.wrapper:nth-child(10) > div:nth-child(1) {
38
  flex: 9;
39
  }
40
.wrapper:nth-child(5) > div:nth-child(1),
41
.wrapper:nth-child(9) > div:nth-child(2) {
42
  flex: 4;
43
  }
44
.wrapper:nth-child(5) > div:nth-child(2),
45
.wrapper:nth-child(9) > div:nth-child(1) {
46
  flex: 8;
47
  }
48
.wrapper:nth-child(6) > div:nth-child(1),
49
.wrapper:nth-child(8) > div:nth-child(2) {
50
  flex: 5;
51
  }
52
.wrapper:nth-child(6) > div:nth-child(2),
53
.wrapper:nth-child(8) > div:nth-child(1) {
54
  flex: 7;
55
  }
56
.wrapper:nth-child(7) > div:nth-child(1) {
57
  flex: 6;
58
  }
59
.wrapper:nth-child(7) > div:nth-child(2) {
60
  flex: 6;
61
  }
62
</style>
63
<div class="wrapper">
64
  <div>1</div>
65
</div>
66
<div class="wrapper">
67
  <div>1</div>
68
  <div>2</div>
69
</div>
70
<div class="wrapper">
71
  <div>1</div>
72
  <div>2</div>
73
</div>
74
<div class="wrapper">
75
  <div>1</div>
76
  <div>2</div>
77
</div>
78
<div class="wrapper">
79
  <div>1</div>
80
  <div>2</div>
81
</div>
82
<div class="wrapper">
83
  <div>1</div>
84
  <div>2</div>
85
</div>
86
<div class="wrapper">
87
  <div>1</div>
88
  <div>2</div>
89
</div>
90
<div class="wrapper">
91
  <div>1</div>
92
  <div>2</div>
93
</div>
94
<div class="wrapper">
95
  <div>1</div>
96
  <div>2</div>
97
</div>
98
<div class="wrapper">
99
  <div>1</div>
100
  <div>2</div>
101
</div>
102
<div class="wrapper">
103
  <div>1</div>
104
  <div>2</div>
105
</div>
106
<div class="wrapper">
107
  <div>1</div>
108
  <div>2</div>
109
</div>
110
<div class="wrapper">
111
  <div>1</div>
112
</div>