AlexKeller

Ваше поле - это строка. Используйте строковые функции для вашей задачи. Например, FIND_IN_SET

https://jsfiddle.net/7n2kxfwj/
Если сделать текст в правой колонке короче, то она займет min-width. А с длинным текстом будет max-width

Если нужно, чтобы и при коротком тексте правая занимала max - можно добавить ей flex: 1 1 auto;

Что-нибудь типа?

SELECT *, ABS(100 - results) AS diff
FROM t
WHERE side = 'bright'
ORDER BY diff ASC
LIMIT 5

Чтобы не прыгало меню, задайте бордер по умолчанию для пунктов меню:
border: 5px solid transparent;
Или, если не добавлять дефолтный бордер, на :hover добавить марджинов:

.page-header__menu-item-open:hover {
  ...
  margin-top: -5px;
  margin-bottom: -5px;
}

Кнопки и подобные - некрупные - элементы дизайна стараюсь делать CSS'ом...
Во-первых, обычно меньше весит...
Во-вторых, если завтра придут и скажут, что мой зеленый недостаточно красный, то в Firebug'е подобрать и заменить цвет будет проще...
Ну и в-третьих, произвольный размер шрифта, все тянется и занимает ровно столько места, сколько требуется...

То, что вы привели в качестве примера, сложно назвать плагином. Обычно плагины каруселей/слайдеров требуют простейшей разметки, грубо говоря так:

<div data-src="images/slide1.jpg">
<div data-src="images/slide2.jpg">
<div data-src="images/slide3.jpg">

А плагин уже сам делает все обвязки.

Здесь же весь HTML уже зашит в коде страницы, все слайды лежат рядом со скрытыми блоками для отображения картинки конкретной фичи. И щелчок по иконке зума просто меняет свойство display этих скрытых блоков. Получается, что из слайдера там только приятный fadeIn/fadeOut очередной картинки. Честно, это своими руками делается быстрее и проще, чем искать специфические плагины...

Попробуйте DIV-у с картинкой прописать background-size: 100%:
jsfiddle.net/bHeJC/12/

Не фонтан, конечно, но если подобрать картинки немного похожие по пропорциям с параллелограммом, но не так уж и плохо…