Как разместить две строки в ячейке td: верхнюю и нижнюю часть ячейки? ⇐ CSS

[Anonymous]

есть простая таблица с одной строкой и двумя ячейками, высота таблицы и ячейки не должна указываться явно и зависит от содержимого. Содержимое находится в правой ячейке, в левой нужно написать строку сверху ячейки и строку снизу ячейки. Можете ли вы рассказать мне, как это сделать?

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

td {
border: 1px solid gray;
}

.cell {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid red;
justify-content: space-between;
}

.top {
align-self: flex-start;
}

.bottom {
align-self: flex-end;
}

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

String top
String bottom



START

END

Пример изображения
Если вы явно укажите высоту ячейки, проблем нет, но если вы не укажете высоту, вложенный div не займет высоту, равную фактической высоте ячейки.

Подробнее здесь: https://stackoverflow.com/questions/786 ... f-the-cell