Fix div to bottom and keep it responsive

I'm sure this case has been answered before - but I didn't find anything useful that could solve the problem...

I'm trying to set chat box div to the bottom of a page, I need it to be placed but not fixed and I also need to keep the page as much responsive as possible.

As you can see Here, the chat box is floating to the left of right div - I wish to have a space between them and make the chat opened up rather then down...

Here are some pictures with more explicit explanation

Here is what I wish to achieve :

Here is what I wish to achieve when the chat window is open:

Here is my current state :