Как разместить много div по горизонтали, не оборачиваясь

Question

Я создаю горизонтальную линейку, которая точно такая, как показано на этом изображении:

Снимок экрана отсюда: https://www.ladderlife.com/apply#SW5zdXJlZFBlcnNvbi5XZWlnaHQ =

Ну вот добиваться горизонтальных калибровок с помощью divs. Когда я добавляю div и устанавливаю их для отображения встроенного блока, div переходит к следующей строке по достижении полной ширины родительского элемента.

Я бы хотел, чтобы мои div-ы оставались на горизонтальной линии.

Идея в том, что линейку можно перетаскивать, а родительский контейнер будет настроен на скрытое переполнение.

Калибровка начнется с 20 до 420, в основном, как видите, мне нужно примерно 400 делений для горизонтального выравнивания.

Это мой код

$(function() {

  load_steps();

});


function load_steps() {
  var main_steps = "";
  for (var i = 20; i <= 420; i++) {
    main_steps += "<div class='main-step'><span>" + i + "</span></div>";;
  }

  $(".weight-ladder").html(main_steps);
}

body {
  padding: 40px;
}

.horizontal-ladder {
  width: 300px;
  border: 1px solid #e1e1e1;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
}

.horizontal-ladder .main-step {
  width: 48px;
  border-left: 1px solid #979797;
  height: 100px;
  display: block;
  height: 300px;
  float: left;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>




<div class="weight-everything-holder">
  <div class="ui-widget horizontal-ladder">
    <div class="ui-widget-content weight-ladder">
      <!-- starting horizontal ruler -->



      <!-- ending the horizontal ruler -->
    </div>
  </div>
</div>

Вот что я получаю из своего кода: