.score { display: flex; width: 480px; flex-direction: column; margin-bottom: 50px; .scale { flex: 1; position: relative; //width: 220px; height: 3px; background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, cyan, blue, green, yellow, orange, red, violet); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, cyan, blue, green, yellow, orange, red, violet); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, cyan, blue, green, yellow, orange, red, violet); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, cyan, blue, green, yellow, orange, red, violet); /* Standard syntax (must be last) */ .grade { height:5px; position: absolute; top: 0; } } .current-score { background: #fff; height: 3px; //width: 480px; margin-top: 3px; } }