Angular CSS: Expansion panel and align items at the top despite the status

I am coding some own expansion panel in Angular. I want to mimic the behaviour of Angular Material Expansion Panel (which won't work with my requirement).

So, I have essentially 3 items, namely

1. a starting icon
2. text
3. a collapse/expand button.

When I click on the expand icon the text is displayed. The running code is provided on Stackblitz.

When the panel is collapsed all the three icons are on the same level



This is due to the

align-items: center;


and this looks perfectly. As soon as I expand the panel the icons float as well to the center of the container. Is there a way to fixate them on the top AND have it centered when collapsed?

Continue reading...