Reactjs drawer animation affecting other elements on page

Question

sample image giving a fare idea:

I have two main components

1. first component (NewsFeed) default state is expanded size (1000px)
2. second component (Chat) default state is collapsed (200px) where only people avatar with their names are displayed in list.

---

two Chat child component

1. PeopleList which renders a list of people. Default state is visible, size is 200px (making the size of Chat Component in its collapsed state.)
2. ChatBox which renders conversation between the user and her people. Default state is hidden, size is 400px.

scenario

1. clicking on a person name from Chat Component will expand it showing the ChatBox Component attached to the right of the PeopleList where both Chat stated changed to expanded and ChatBox state to visible changing the NewsFeed Component to its collapsed state where its size reduced to accommodate Chat Component in its new state (expanded).

Thanks.