Leave div and fixed elements

Question

I have div that opens to the side by clicking the button:

If I let the div with "Change City" with fixed height will solve, but the letters keep moving.

Would it have some way that the elements would not resize when opening?

Answer 1

A fixed element - Fixed - is positioned relative to the "viewport", it means that it will always be in the same place even if there is scrolling on the page.
As well as relative, properties top, right, bottom and left are also used.

I’m sure you noticed a fixed element in the right corner of the screen, I’m giving you permission to observe it now, and here’s the CSS applied to it:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

<div class="fixed">
    Oi! eu estou fixo
</div>

Answer 2

In div q contains the place animation:

div{
   overflow:hidden;
   white-space:nowrap;
}

This will make whatever is inside your div the size of it, without resizing.