¿Hay alguna manera de evitar que el contenido de mi div se mueva cuando se abre y se cierra? Se ve muy desordenado. Cuando hace clic para abrir el div, todo pasa de una línea a dos líneas a 3 líneas, etc. Solo quiero que se abra como se mostrará cuando esté completamente abierto. He incluido algunas capturas de pantalla para mostrar lo que quiero decir.

Esta imagen muestra cómo se ve el div cuando se abre con todo apilado uno encima del otro.

Este es el resultado final con todo donde debería estar, idealmente me gustaría que el div se abra con todo como se muestra a continuación.

Este es el código que tengo:

 <script> function openNav() { var sidenav = document.getElementById("mySidenav"); sidenav.classList.add("sidenavopen"); sidenav.classList.remove("sidenavclose"); } function closeNav() { var sidenav = document.getElementById("mySidenav"); sidenav.classList.add("sidenavclose"); sidenav.classList.remove("sidenavopen"); } </script> <style> .sidenav .closebtn { position: absolute; top: 0px; left: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } .sidenavopen { width: 40%; @media (max-width: $breakpoint-mobile) { width: 100%; } } .sidenavclose { width: 0 !important; } </style>