ну как вариант - сделайте через table-cell обе части и будет вам верт. выравнивание заодно
upd: а, это заголовок... ну тут тупо абсолютом вынесите круг влево, центрируем обычным top: 50%+ отрицательный верхний маржин = height/2 , он же у вас фикс. размера. а заголовку отступ слева чтоб не наезжал.
так обычно наоборот - нарабатываешь решения, затем что-то общее выносишь в библиотеку.
прост облоки в проектах разнятся, оттого и выносятся целиком обычно мелкие элементы типа кнопок и прочего. а большие блоки хоть завыносись - в новом проекте все равно будут не такие )) А мелочи -пример - topcoat.io
Я долгое время пытался использовать column- для колонок, но обилие багов меня задолбало, и от этой идеи отошел, чего и вам желаю.
Но если охота попробовать... проблема тут в том, что браузер переносит содержимое элемента из первой строки во вторую (это не черточка, это низ буквы "р"). Запретить такой перенос можно с помощью column-break-inside: avoid; Но это только для вебкита работало, так что можно дополнить overflow, итого что-то типа
LI {
-webkit-column-break-inside: avoid;
overflow:hidden;
}
вместо overflow пойдет и display:table; +width:100% или display:inline-block; +width:100%
но в целом повторюсь - это очень нестабильная штука, к сожалению