* { box-sizing: border-box; }

.sizing-box {
  height: 100px;
  width: 120px;
}

.signal-bars {
  display: inline-block;
}

.signal-bars .bar {
  width: 14%;
  margin-left: 1%;
  min-height: 20%;
  display: inline-block;
}
.signal-bars .bar.zero-bar  { height: 0%; }
.signal-bars .bar.first-bar  { height: 20%; }
.signal-bars .bar.second-bar { height: 40%; }
.signal-bars .bar.third-bar  { height: 60%; }
.signal-bars .bar.fourth-bar { height: 80%; }
.signal-bars .bar.fifth-bar  { height: 99%; }

.good .bar {
  background-color: #8bc34a;
  border: thin solid darken(#8bc34a, 7%);
}
.bad .bar {
  background-color: #e84e40;
  border: thin solid darken(#e84e40, 20%);
}
.ok .bar {
  background-color: #ffc107;
  border: thin solid darken(#ffc107, 7%);
}

.four-bars .bar.fifth-bar,
.three-bars .bar.fifth-bar,
.three-bars .bar.fourth-bar,
.one-bars .bar:not(.first-bar),
.two-bars .bar:not(.first-bar):not(.second-bar),
.zero-bars .bar

{       
  background-color: #fafafa;
  border: thin solid #f3f3f3;
}