Winner Stair CSS

by dumptyd

HTML

<div class="stairs">
  <div class="stairs__stair stairs__stair--second">
    <div class="stairs__prize">200</div>
    <div class="stairs__bar">
       <div class="stairs__rank">2*</div>
       <div class="stairs__label">Rank</div>
    </div>
  </div>
  
  <div class="stairs__stair stairs__stair--first">
    <div class="stairs__prize">300</div>
    <div class="stairs__bar">
       <div class="stairs__rank">1*</div>
       <div class="stairs__label">Rank</div>
    </div>
  </div>
  
  <div class="stairs__stair stairs__stair--third">
    <div class="stairs__prize">100</div>
    <div class="stairs__bar">
       <div class="stairs__rank">3*</div>
       <div class="stairs__label">Rank</div>
    </div>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap');

/* vertically align the container for brownie points */
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  font-family: 'PT Sans', sans-serif;
}

/* outermost container */
.stairs {
  width: 350px;
  height: 200px;
  display: flex;
}

/* stair container */
.stairs__stair {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
}

/* prize text */
.stairs__prize {
  text-align: center;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  font-weight: bold;
}

/* colored bar */
.stairs__bar {
  text-align: center;
  color: #fff;
  line-height: 1;
  padding-top: 1rem;
}

/* text inside colored bar */
.stairs__rank {
  font-size: 2rem;
  font-weight: bold;
}


/* stair specific height and color */
.stairs__stair--second > .stairs__bar {
  height: 50%;
  background-color: orange;
}

.stairs__stair--first > .stairs__bar {
  height: 70%;
  background-color: tomato;
}

.stairs__stair--third > .stairs__bar {
  height: 40%;
  background-color: orange;
}