Создание многострочной сетки с горизонтальной прокруткой и фиксированной шириной столбца с использованием CSS

Question

У меня есть переменное количество полей ввода в макете сетки начальной загрузки с четырьмя столбцами col-md-3, как показано на прикрепленном изображении ниже.

Я бы хотел, чтобы эта сетка прокручивалась по горизонтали после отображения 12 имен (4 столбца х 3 строки). Следовательно, согласно этой сетке, вместо отображения всех имен на странице, последние два имени будут перечислены как первые два элемента ввода, как только пользователь прокрутит вправо.

Изображение сетки, которая у меня сейчас есть

Подойдет любое решение! Однако решение для флексбокса было бы потрясающим!

Ура!

Код:

<div class="card-body">
  <form id="sterilizeForm" class="form-group ">
    <div class="row mx-2 mt-2 cleaners">
      @foreach( $cleaners as $key => $cleaner )
          <div class="cleaner col-md-3 span4 input-group mb-3">
              <div class="input-group-prepend">
                  <span class="input-group-text" id="{{$cleaner->id}}">
                      {{$cleaner->name}}
                  </span>
              </div>

              <select name="options" class="">
                     <option value=''>Select one</option>
              </select>

          </div>
      @endforeach()
    </div>
    
   <button  class="log d-flex btn btn-primary btn-lg " type='submit'>
      Print
   </button>
 </form> 
</div>