How to correctly display an array of cities and regions from the database in 4 bootstrap columns?

Question

Layout

I extract an array of the form from the base:

Array of cities

Array
(
    [1] => Array
        (
            [region_name] => Адыгея
            [cities] => Array
                (
                    [306] => Майкоп
                    [307] => Абадзехская
                    [308] => Адыгейск
                    [309] => Белое
                    [310] => Блечепсин
                    [311] => Вольное
                    [312] => Гиагинская
                    [313] => Дондуковская
                    [314] => Каменномостский
                    [315] => Кошехабль
                    [316] => Красногвардейское
                    [317] => Краснооктябрьский
                    [318] => Кужорская
                    [319] => Натырбово
                    [320] => Понежукай
                    [321] => Северо-Восточные Сады
                    [322] => Тахтамукай
                    [323] => Тлюстенхабль
                    [324] => Тульский
                    [325] => Хакуринохабль
                    [326] => Ханская
                    [327] => Хатукай
                    [328] => Ходзь
                    [329] => Энем
                    [330] => Яблоновский
                )

        )

    [22] => Array
        (
            [region_name] => Алтайский край
            [cities] => Array
                (
                    [331] => Барнаул
                    [332] => Алейск
                    [333] => Алтайское
                    [334] => Баево
                    [335] => Белокуриха
                    [336] => Белоярск
                    [337] => Берёзовка
                    [338] => Бийск
                    [339] => Благовещенка
                    [340] => Боровиха
                    [341] => Бурла
                    [342] => Быстрый Исток
                    [343] => Верх-Катунское
                    [344] => Власиха
                    [345] => Волчиха
                    [346] => Горняк
                    [347] => Ельцовка
                    [348] => Завьялово
                    [349] => Залесово
                    [350] => Заринск
                    [351] => Змеиногорск
                    [352] => Зональное
                    [353] => Зудилово
                    [354] => Калманка
                    [355] => Камень-на-Оби
                    [356] => Ключи
                    [357] => Косиха
                    [358] => Красногорское
                    [359] => Краснощёково
                    [360] => Крутиха
                    [361] => Кулунда
                    [362] => Курья
                    [363] => Кытманово
                    [364] => Лебяжье
                    [365] => Леньки
                    [366] => Малиновое Озеро
                    [367] => Мамонтово
                    [368] => Михайловское
                    [369] => Налобиха
                    [370] => Новичиха
                    [371] => Новоалтайск
                    [372] => Новоегорьевское
                    [373] => Новые Зори
                    [374] => Озерки
                    [375] => Павловск
                    [376] => Панкрушиха
                    [377] => Первомайское
                    [378] => Поспелиха
                    [379] => Ребриха
                    [380] => Родино
                    [381] => Романово
                    [382] => Рубцовск
                    [383] => Сибирский
                    [384] => Славгород
                    [385] => Смоленское
                    [386] => Советское
                    [387] => Соколово
                    [388] => Солонешное
                    [389] => Солтон
                    [390] => Сростки
                    [391] => Староалейское
                    [392] => Степное Озеро
                    [393] => Табуны
                    [394] => Тальменка
                    [395] => Тогул
                    [396] => Топчиха
                    [397] => Троицкое
                    [398] => Тюменцево
                    [399] => Угловское
                    [400] => Усть-Калманка
                    [401] => Усть-Чарышская Пристань
                    [402] => Хабары
                    [403] => Целинное
                    [404] => Чарышское
                    [405] => Черемное
                    [406] => Шелаболиха
                    [407] => Шипуново
                    [408] => Южный
                    [409] => Яровое
                )

        )
// итд 80 регионов

I do this, but lines 10-14 somehow do not look nice.

<div class="row ml-0 mt-3">
  <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mt-3 pl-0">
    <? foreach($geo as $region_id=>$region): ?>
       <div class="p-1 pl-2 mt-2 mb-1 region-name" region_id="<?=$region_id;?>"><?=$region['region_name'];?></div>
       <div class="pl-2 city-name" region_id="<?=$region_id;?>">
         <? foreach($region['cities'] as $city_id=>$city_name): ?>
         	<A href="./city<?=$city_id;?>"><?=$city_name;?></A><BR>
         <? endforeach; ?>
      </div> 
      <? $n++; if($n == 21):?>
        </div><div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mt-3 pl-0">
        <? unset($n); ?>
      <? endif; ?>	
    <? endforeach; ?>		 
  </div>	
</div>

How to be? If I wrap each region in a separate block (I refuse 4 main columns, then when opening cities in the regions, the neighboring ones also move out and it’s empty there.
How do professionals do it?
So that the functionality remains and the code is beautiful ...

Answer 1

Wrap each in .col-lg-3, not forgetting about rearranging up to one speaker for phones. All in one .row.
An extreme option is multi-column text . But it does not eat block elements, which means that if the text has a wrapper, then it can be transferred to another column. This can be fixed, but the task, as I said, is for extreme pastime)

Answer 2

I would do it with Dropdowns with a height limit and vertical scrolling in one container with .d-flex
And you can do it on Select