zombtron

А чистый css чем не угодил?

div:nth-child(5n+1), div:nth-child(5n+2) {
    width: 49%;
    display: inline-block;
}
div:nth-child(5n+3), div:nth-child(5n+4), div:nth-child(5n+5) {
    width: 33%;
    display: inline-block;
}

И никаких левых библиотек, никаких извратов с хтмл.

Нужные вам адреса имеют вот такой вид:
https://www.21vek.by/reviews/get/637728/0/?page=2&hash=
где page=0, 1, 2 и тд. для 1-10, 11-20, 21-30 отзывов, соответственно.
В общем, нужно загрузить страницу, найти /reviews/get/--хххх--/--хххх--/ и кол-во и загружать комменты.
Но... прямым запросом оно их не отдает, пишет 404. возможно простым аяксом можно, а может там CORS и нужно глубже рыть.
Ответ приходит в json но готовым хтмл.

https://jsfiddle.net/x75zLn2a/
вот вам каркас. Стилизуйте и напичкайте данными.
Стилизоваться оно должно как угодно, ибо там обычные дивы.
Инпут скрытый я добавил для того, чтобы не колдовать с отправкой из формы - все по фен-шую, стандартный инпут с name и value.
Нейм у инпута - это нейм предполагаемого селекта, data-value у дивов - value у option.
Все свистелки вставляются в div.opt

Еще завтыкал сделать сворачивание при выборе и при клике вне селекта.
И нужно еще добавить позиционирование/размеры, чтобы при открытии оно накрывало то, что снизу, а не сдвигало.
Я думаю, понятно, что и как. Если нет, обращайтесь, подскажу.

upd:
https://jsfiddle.net/zombotron/gakqoz2t/3/
Добавил, что забыл + управление кнопками клавиатуры.
Конечно жестко велосипедно, зато без кучи зависимостей, что позволяет довольно шустренько работать на слабом ноуте.

+ есть небольшие костыли. Но я не претендую на универсальность решения. Это скорее просто алгоритм.

В идеале нужно было бы рекурсивно обходить и брать все непосредственные дочерние элементы. Но есть проблема: при 200-300 элементах с 5-6-ю уровнями вложенности будет жесткий тупняк. Поэтому без рекурсии.

var lev = 0; // level
var selector = 'html'; // root tag
var els = document.querySelectorAll(selector);
var root = els;

while(els.length > 0){
	for(j=0; j<els.length; j++){
		// тут колдунство над els[j];
	}
	lev++;
	selector += ' > *'; 
	els = document.querySelectorAll(selector);
}

Этот код перебирает все элементы по уровням. Сначала корень - хтмл, на следующей итерации цикла while - head и body, потом то, что непосредственно вложено в head и body, и т.д.

Внутри цикла делаете проверку имени тега. Если элемент формы, добавляете ему имя. Колво скобок == уровню вложенности, ну а внутри скобок по усмотрению.

Типа так:

<div class="figure"></div>
<style>
.figure {
    width: 250px;
    height: 50px;
    background-color: orange;
    border-radius: 15px;
	position: relative;
}

.figure:before {
    content: '';
    width: 234px;
    height: 25px;
    background-color: orange;
    display: block;
    position: absolute;
    left: 8px;
    top: 35px;
    border-radius: 50%;
}
</style>

с размерами, пропорциями, градиентом и пр. свистоперделками разбирайтесь сами. )

Я думаю, что для "правильности" нужно руководствоваться тем, что загружать нужно только те шрифты, которые требуются и избегать ВОШ (вспышка обычного шрифта) - загружать шрифт перед блоком, в котором он используется и загружать синхронно.
А так, на ваше усмотрение и с учетом структуры/архитектуры страницы/приложения:
, @font-face{}, по прямому url, из localstorage, в виде base64.
По ходу, непосредственно в хтмл-коде - 100% гарантирует загрузку именно там, где прописано и именно в момент вызова. Но нужно учитывать размер таких кусков и то, что такой код выглядеть будет страшно. Но 1-2 шрифта загрузить можно...

Вот так работает, но с анимацией и при загрузке.
На css.
Как-то и этот косяк убирается., но мне лень думать как. )

.square{
    height: 100px;
    width: 100px;
    background: red;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    animation: squareq linear 1s;

}
.square:hover{
    animation: square linear 1s;
}

@keyframes square {
  from {
    width: 100px;
    height: 100px;
  }
  25% {
    height: 100px;
    width: 200px;
  }
  50% {
    width: 200px;
    height: 200px;
  }
  75% {
    width: 200px;
    height: 100px;
  }
  to {
    width: 100px;
    height: 100px;
  }
}


@keyframes squareq {
  from {
    width: 100px;
    height: 100px;
  }
  25% {
    height: 100px;
    width: 200px;
  }
  50% {
    width: 200px;
    height: 200px;
  }
  75% {
    width: 200px;
    height: 100px;
  }
  to {
    width: 100px;
    height: 100px;
  }
}