Центрировать по вертикали, но сохранять верхнее поле при расширении содержимого. ⇐ CSS

[Anonymous]

У меня есть флексбокс с двумя столбцами. Левое содержимое обычно выше правого, и я хочу отобразить правое содержимое по центру.
Однако левое содержимое может расширяться, и я хотел бы сохраняйте правое содержимое на месте, когда оно расширяется, вместо того, чтобы оставаться по центру.
Пока у меня есть первая часть, но правая часть опускается, чтобы оставаться в центре, когда левая расширяется. p>

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

.host {
width: 500px;
padding: 5px;
display: flex;
flex-direction: row;
align-items: center;
background: yellow;
}

.left-panel {
width: 50%;
margin: 5px;
flex-direction: column;
background: pink;
}

.summary {
margin: 5px;
background: green;
}

.expand-list {
margin: 5px;
background: skyblue
}

.right-panel {
width: 50%;
margin: 5px;
display: flex;
flex-direction: row;
background: blue;
}

.image {
margin: 5px;
background: red;
}

button {
margin: auto 5px;
width: 100px;
}

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

Here is a long paragraph of text that I need to display.
It takes up most of the container, but there's an expander
below that will make this text take up less because the
expander will take up more when expanded.


click me
[list]
[*]One
[*]Two
[*]Three
[*]Four
[*]Five
[*]Six
[*]Seven
[/list]





Don't let this text fool you;

it's actually an image.


Do it

Я не могу явно установить верхнее поле для нужного содержимого, потому что Левое содержимое не имеет заданной высоты.
Как сделать так, чтобы правое содержимое оставалось, когда левое расширяется? Предпочтительно решение, использующее только CSS.

Подробнее здесь: https://stackoverflow.com/questions/791 ... nt-expands