Размещение описания метки под элементами ввода

Question

Чего я пытаюсь достичь визуально: https://imgur.com/tgjsSOX

Что я имею в ближайшем приближении: https://codepen.io/anon/pen/xzQLQw

Теперь, чтобы разместить описания под флажками, я мог бы добавить класс uk-flex-column примерно так: https://codepen.io/anon/pen/gKQGWd

к родительскому div элементов ввода для принудительного размещения столбцов.

Это прекрасно работает, если размер окна не изменяется до меньшей ширины.

Если его размер изменяется, содержимое столбцов меняет свое положение, и чекбоксы больше не остаются на линии зачеркивания.

Что я могу сделать, чтобы флажки оставались на линии при изменении размера окна?

Answer 1

Измените следующий CSS:

.strikethrough {
position: absolute;
width: 100%;
top: 40px;
left: 0px;
height: 5px;
background: gainsboro;
z-index: -1;
}

Устанавливая верхнюю часть на фиксированную высоту пикселя, а не в процентах, она должна оставаться выровненной даже при изменении размера окна.