<div class="g1">
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="g2">
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="g1">
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="g2">
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="g1">
<div class="bar"></div>
<div class="bar"></div>
</div>
<style>
body {
background: #469DBA;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
width: 100%;
}
div {
width: 100%;
display: flex;
justify-content: space-between;
}
.bar {height: 1.9rem; background: #F5E3B5}
.g1 {gap: 17.5rem}
.g2 {gap: 10rem}
</style>