We have an old aspx in house application. The home page takes userName of the current user and loads the list of user profiles matching up the request.(Yes there could be more than one profiles for an username in multiple AD domains). User than selects one profile and can search for roles and permissions associated to that profile. List of roles will be displayed in a table.

I'm planning to uplift that portal using Angular(current stable version). I am using Dribble as my reference for the UI design. I've following idea to implement in the design but not sure whether it is possible to achieve in real time : (3rd point).

UI Design : <https://i.stack.imgur.com/Vu2Gp.png>

1. A Form which takes `userName` as input and `submit`
2. Loads the user profiles in form of banners(boxes)
3. When any of the profiles selected, for example 2nd profile

* 1st and 3rd boxes should disappear
* Selected banner should take the whole width expanding from its current location(smooth transition) like the big `div` in the design carrying more info about the user

**What did I try** : Started with `Grid` to display the banners but switched to `flex` as grid has no animation support(from my research). With `flex` I could expand the selected profile but couldn't animate the way I preferred. `div` always loads from left to right. Tried `position` properties, `keyframes` but the selected banner loads from the far left instead of stretching either side from its current location(from mid of screen --> expand either side to 100%).

PS 1 : this could be a long theory or could have explained much simpler. Execuse me in either case :)

PS 2 : pls note that i'm asking guidance to achieve my design in code. So please don't judge me that I am asking someone else to do coding for me. Pointing me towards a direction is much appreciated.