Improve div for cumulative datas, thanks Alyve!

app/javascript/css/application.scss

@@ -187,3 +187,26 @@ table.scoring img {
 		max-width: 140px;
 	}
 }
+
+/** Chart CSS */
+.cumulative-datas {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+
+	&-content {
+		position: absolute;
+		height: 2rem;
+	}
+}
+
+.cumulative-data {
+	height: 2rem;
+	line-height: 2rem;
+	display: inline-block;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	margin-right: .1rem;
+	padding-left: .3rem;
+}

app/views/statistics/index.html.erb

@@ -64,14 +64,16 @@
 
     <!-- DIV solution -->
     <em>DIV solution</em>
-    <div class="row">
-      <% grades.data.sort_by(&:first).each do |grade, number| %>
+    <div class="cumulative-datas">
+      <% left = 0
+         grades.data.sort_by(&:first).each do |grade, number| %>
         <% unless %w(T V).include?(grade)
              percent = (number.to_f / total.to_f) * 100.0
              color = colors[grade] %>
-          <div style="width: <%= percent.round %>%; height: 2rem; line-height: 2rem; display: inline-block; background-color: <%= color %>; white-space: nowrap; text-overflow: ellipsis; margin-right: 2px">
+          <div class="cumulative-data" style="left: <%= left %>; width: <%= percent.round %>%; background-color: <%= color %>;">
             <%= "#{grade}: #{percent.round}% (#{number})" %>
           </div>
+          <% left += percent.round %>
         <% end
            end %>
     </div>