JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxes">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
  <div class="box box-4"></div>
  <div class="box box-5"></div>
  <div class="box box-6"></div>
  <div class="box box-7"></div>
  <div class="box box-8"></div>
  <div class="box box-9"></div>
  <div class="box box-10"></div>
</div>

SCSS

$count: 10;
$baseWidth: 12px;

.boxes {
  box-sizing: border-box;
  border: 1px solid black;
  display: flex;
  // простая алгебраическая прогрессия
  width: ($baseWidth + $baseWidth * $count) / 2 * $count;
}

.box {
  box-sizing: border-box;
  border: 1px solid red;
  height: 30px;
  flex-shrink: 0;
}

@for $i from 1 through $count {
  $number: $baseWidth * $i;
  .box-#{$i} {
     width: $number;
  }
}