JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="scale">
	<li>&nbsp;</li>
	<li>&nbsp;</li>
	<li>&nbsp;</li>
	<li class="selected">&nbsp;</li>
	<li class="selected">&nbsp;</li>
	<li>&nbsp;</li>
	<li>&nbsp;</li>
	<li>&nbsp;</li>
</ul>
<ul class="graduation">
    <li>0</li>
    <li>50</li>
	<li>100</li>
    <li>200</li>
	<li>500</li>
	<li>1000</li>
	<li>2500</li>
	<li>5000</li>
    <li>></li>
</ul>

CSS

.scale, .graduation {
	width: 300px;
	height: 100px;
	background: #eee;
	outline: 1px solid #333;
	margin: 0;
    padding: 0;
	display: -webkit-flex; /* OK chrome 21 */
	-webkit-align-items: center;
	display: flex;
	align-items: center;
}
.scale li {
    background: #aaa;
    padding: 10px 0;
    list-style: none;
    border-right: 1px solid #fff;
    -webkit-flex: 1;
    flex: 1;
}
.scale li.selected {
    background: #007f0e;
    padding: 20px 0;
}
.scale li:last-child {
    border-right: none;
}
.graduation {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.graduation li {
    list-style: none;
    text-align: right;
}
.graduation li {
    -webkit-transform: rotate(-90deg);	
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.graduation li:nth-child(1) { background: #700; -webkit-flex: 1; flex: 1; }
.graduation li:nth-child(2) { background: #900; -webkit-flex: 2; flex: 2; }
.graduation li:nth-child(3) { background: #c00; -webkit-flex: 2; flex: 2; }
.graduation li:nth-child(4) { background: #070; -webkit-flex: 2; flex: 2; }
.graduation li:nth-child(5) { background: #090; -webkit-flex: 2; flex: 2; }
.graduation li:nth-child(6) { background: #0c0; -webkit-flex: 2; flex: 2; }
.graduation li:nth-child(7) { background: #909; -webkit-flex: 2; flex: 2; }
.graduation li:nth-child(8) { background: #c0c; -webkit-flex: 2; flex: 2; }
.graduation li:nth-child(9) { background: #707; -webkit-flex: 1; flex: 1; }