Вертикально выравнивать многолинейный метка/значения содержимого элемент сети без рефакторинга метки и значения ⇐ CSS

[Anonymous]

В этом примере сетки каждый элемент сетки представляет собой пару метки/значения, сгруппированная как div. Это нельзя реконструировать - слишком много из этих элементов. Некоторые этикетки многослойны, и значения следуют за ними на следующей строке, что делает некоторые из смещенных. Значение всегда должно быть вертикально выровнено с наименьшим значением в этой строке. Например, в строке 1 все значения должны быть вертикально на уровне самого низкого значения, которое поступает из столбца 2. Возможно ли это без большого рефакторинга?

Код: Выделить всё

* { margin: 0; box-sizing: border-box; outline: 1px solid #0004; }

.card-content-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
justify-content: space-between;
gap: 20px;
}

.field {
word-break: break-word;
}

.field-label {
font-weight: bold;
font-size: 1.2rem;
color: red;
}

.field-value {
font-size: 1.2rem;
}< /code>



Field
Value 1




Field 2 Long Label Long Label Long Label
Value ABSAHUASHIUS




Field 3
Test Str Test Str Test Str Test Str




Field 4
XYZ




Field 5
ASDASSFDSFSDFSDFSDFSDFSD




Field 6
asas asdasd asdasd




Field 7 abcde fghijk lmnopq sfsofs sfsdfdsfs sfsfsfsff
a




Field 8
---




Field 9
Long String Long String




Field 10
X




Field 11
Xsdfsfsdfsdfsf

Подробнее здесь: https://stackoverflow.com/questions/796 ... ithout-ref