Выравнивание элементов на карточке ⇐ CSS

[Гость]

Здесь показаны все бронирования пользователей. Все выглядит нормально, пока потребность в оборудовании не станет длинной и это не испортит мое выравнивание. Как я могу изменить это, чтобы карточка увеличивалась по вертикали и не затрагивалась другие мои поля?
Изображение, показывающее бронирования и проблему
Я попробовал изменить flex на 1. Я думаю, что вместо того, чтобы текст расширялся по горизонтали, он выглядел бы лучше, если бы он расширялся по вертикали (выравнивание)

< div class="snippet-code">

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

.card {
display: ruby-text;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}

.card-column {
font-weight: bold;
width: 120px;
}

.card-value {
text-align: justify;
}

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

Booking ID:
{{ booking[0] }}


Room:
{{ booking[1] }}


User:
{{ booking[2] }}


Date:
{{ booking[3] }}


Time:
{{ booking[4] }}


Attendance:
{{ booking[5] }}


Equipment
{{ booking[6] }}


Status:
{{ booking[7] }}


Update
Delete

Подробнее здесь: https://stackoverflow.com/questions/781 ... -in-a-card