How can I animate grid box change with angular BrowserAnimationsModule?

To describe my issue, I will start from the roots to explain what I am trying to do, and why I decided to use Grid Box for this, let's start off with two wireframes:

My layout is built up from two containers; the body and the sidebar. Don't think of it as this is the whole website, this is just a component.

The sidebar contains two elements, notes and chat.

Notes & chat elements can be mini-sized, but once it is mini-sized, the second part of the left body container will get wide and take the place that the sidebar used to take at it's bottom space, like in the example below:

So after researching a bit I couldn't find any other solution besides having 2 different components for the second-data part that needs to get wider, or just use a Grid Box, however, I must animate the side bar and the second part of the data with a transition of it's width changing.

There is an angular POC example I have created with Grid Box to achieve what I need without animation:

https://stackblitz.com/edit/angular-ivy-7tucsx?file=src/app/app.component.html

Is it possible to achieve this animation with grid box by just adding the .closed class to my .container like in the example POC?

from How can I animate grid box change with angular BrowserAnimationsModule?