.sizing-box {
  height: 10px;
  width: 20px;
}

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

.signal-bars .bar {
  width: 14%;
  margin-left: 1%;
  min-height: 20%;
  display: inline-block;
}
.signal-bars .bar.first-bar {
  height: 35%;
}
.signal-bars .bar.second-bar {
  height: 60%;
}
.signal-bars .bar.third-bar {
  height: 99%;
}

.bar {
  background-color: #28a745;
}
.one-bar .bar {
  background-color: #e74c3c;
}

.two-bars .bar {
  background-color: #f1c40f;
}

.one-bar .bar:not(.first-bar),
.two-bars .bar:not(.first-bar):not(.second-bar) {
  background-color: #fafafa;
}