Посторонним В.

Оказалось, дело в картинках - они ломают layout. Заюзал imagesLoaded https://masonry.desandro.com/layout.html#imagesloaded , и всё отлично.

Ответ на вопрос - никак
https://stackoverflow.com/questions/5540485/how-to...

Пришлось юзать table/table-cell

.parent {
  display: table;
}
.first, .second {
  display: table-cell;
  vertical-align: top;
}

.first {
  width: 100px;
  height: 100px;
  background: red;
}

Как я и думал, решение было близко. Нужно было просто задать max-* контейнеру, а картинке - width/height = 100%.
https://jsfiddle.net/8t7zs2ke/1/

Получилось:

.panel {
//...

&__button {
//...
$this: &;
  &_active  {
       @extend  #{$this};
       background: yellow;
  }

 }

}

Как оказалось, Webkit плохо справляется с дробными значениями. В моём случае высота строки вышла 15*1.5 = 22.5 пикселей , и Webkit округляет это значение до 22, делая каждую строку меньше предполагаемого размера, что в итоге выливается в изменение предполагаемой высоты блока на 16*0.5 = 8 пикселей. У Firefox и Edge расчеты выполняются более грамотно.
Адекватного решения проблемы (на CSS) я не нашел, т. к. нужно, чтобы высота блока была равной 16-ти строкам при любом размере шрифта и масштабе. С JavaScript тоже всё сложно - он не обрабатывает событие изменения масштаба в браузере.

Задал центральному блоку:
position: absolute;
right: 50%;
transform: translateX(50%);

А остальные выравнял по правому краю.

Наконец-то получил вразумительный ответ. Синтаксис в моём случае:

Tx Rx Bx Lx / Ty Ry By Ly

А я делал по принципу:

Tx/Ty Rx/Ry Bx/By Lx/Ly

Сделал родителя display: table, и в нём три блока display: table-cell - 33, 34 и 33% ширина. В центральный засунул то что должно быть посередине и сделал выравнивание по центру, в правом разместил поиск с маргином справа. И с вертикальным выравниванием всё отлично - vertical-align работает на ура.

Сработало вот так:

&::before {
  content: "● ";
  font-family: monospace; // одинаковая ширина символов
  margin-left: -2ch; // влево на два символа
}

Спасибо Сергею.

Сделал в PHP движке экшн для проверки/обновления изображения, JS тягает его по HTTP после загрузки страницы (асинхронно), если PHP возвращает 0 (файл не нуждается в обновлении), JS ничего не делает, если возвращается 1 (файл обновлен), то JS тут же перезагружает бэкграунд. Для кнопки смены просто PHP скрипту отправляется параметр force.