How to stop Javascript div opening from moving the contents around

Question

Is there a way to stop the content of my div from moving around as it opens and closes? It looks really messy. When you click to open the div everything goes from one line to two lines to 3 lines etc. I just want it to open as it will display when fully open. I have included some screenshots to show what I mean.

This image showcases what the div looks like as it opens with everything stacked on top of each other.

This is the final result with everything where it should be, ideally I would like the div to open with everything staying as below.

This is the code I have:

<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>