Przesunięcie diva

Question

Witam,
kod wygląda tak:

#logging-panel
{
    padding:10px;
    border-radius:10px;
    border:3px solid white;
    height:100px;
    width:191px;
    overflow:hidden;
    transition: all 1s;
}

#logging-panel:hover{
    height:250px;
    width:250px;
    border-radius: 32px;
}

zaś w kodzie HTML:

<div id="logging-panel">
        <h2>log in</h2>
        <input type="email">
        <input type="password">
</div>

Bez najeżdżania myszką na div #logging-panel w divie widoczny jest nagłówek LOG IN, ale jeżeli w tym stanie zacznie się wprowadzać do jednego z inputów tekst, to widoczna zawartość diva przesuwa się w dół i zamiast LOG IN centralnym elementem diva jest input, w którym wprowadzany jest tekst. Co można z tym zrobić?

Pozdrawiam.

Comments

Nic tu się nie przesuwa code. ​​​​​​​

---

Ustaw w CSS dla #logging-panel:

width:195px;
overflow:hidden;

Potem kliknij w input, zjedź kursorem z diva i wpisz dowolną literę w input. Wtedy zobaczysz, z czym problem.

---

Dalej nie wiem o co chodzi. Wpisane tak jak powiedziałeś w css, klikam w inputa zjeżdżam kursorem z diva wpisuję dowolną literę i nic się nie zsuwa, kod online. Może zrób krótkie wideo i udostępnij linka.