How can I fix the width of my 4th slide in this horizontal accordion?

Slides 1-3 in this horizontal accordion are working great, but when you click on the 4th slide you will see the text slide across white space and into position. The background is also slightly smaller than slides 1-3. I tried a few changes but the text would unwrap into position and I want it to remain static as it is right now.

I assume it has to do with the container width but even when I make the container large, the 4th panel still swipes across that bit of white space first and the background is still smaller than the rest of the slides.

Here’s my code – any advice is appreciated!

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:[email protected]&family=Vina+Sans&display=swap" rel="stylesheet">

<style>
      
    
  .holder {
  max-width: 640px;
  height: 450px;    
}
    
.slide__content {
  padding: 50px;
}
    
    .slide__content p {
  width: 300px;
}

    .slide__content h2 {
  width: 600px;
}    
    
#slide1 button {
  background: #FFC8FD;
}    
    
#slide2 button {
  background: #FDC9B2;
}
    
#slide3 button {
  background: #E4E0A4;
}  
  
#slide4 button {
  background: #FFC8FD;
}     
    
/*EDIT DESKTOP LAYOUT*/ 
@media screen and (min-width: 1024px) {  
    .holder h2 {
        font-family:arial;
        color:#CD8039;
        font-size:30px;
    }

    .holder p {
        font-family:darker grotesque;
        font-size:17px;
        padding:0px 200px 0px 0px;
    }    
        
.slides {
  display: flex;
  flex-direction: row;
  background: #FFF0E9;
  height: 100%;
  margin: 0;
  padding: 0;
    }
   
.slide {
  display: flex;
  width: 75px;
  overflow: hidden;
  flex-shrink: 0;
   transition: width 0.5s ease;    
    }   
      
.selected {
  width: calc(100% - 150px);
    }
     
.slide button {
  height: 100%;
  cursor: pointer;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  border-style: solid;
  border-width:1px;
    border-color:#fff;
  width: 75px;
  display: flex;
    }
    
 .slide button span {
  font-family:vina sans;
    color:#CD8039;
    font-size:50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom:-30px;  
  width: 450px;
  text-align: left;
  transform: rotate(-90deg);
  transform-origin: top left;
    }
    } 
    
/*EDIT MOBILE*/
@media screen and (max-width:640px) { 
    
.slides {
        display: flex;
        flex-direction: column;
        background: #FFF0E9;
        height: auto;
        margin: 0;
        padding: 0;
    
    }   
    
.slide button span {
        font-family: vina sans;
        color: #CD8039;
        font-size: 20px;
        text-align: center;
        flex-grow: 1;
    
    }
     
.slide {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
        flex-shrink: 0;
    
    }
         
.selected {
  height: auto;
    
    }
   
.slide button {
        cursor: pointer;
        flex-direction: row;
        border-style: solid;
        border-width: 1px;
        border-color: #fff;
        width: 100%;
        display: flex;
    
    }
    

    .holder h2 {
        font-family:arial;
        color:#CD8039;  
        font-size:20px;
        width:100%;
    }

    .holder p {
        font-family:darker grotesque;
        font-size:17px;
        width:100%;
    } 
 
        .slide button {
            height: auto;
            flex-direction: column;
            align-items: flex-start;
            
        }

        .slide button span {
            font-size: 40px;
            padding: 10px;
            text-align: left;
            
        }

        .slide__content {
            padding: 20px;
            
        }
    }
</style>

<div class="holder">
  <div class="slides">
    <div id="slide1" class="slide selected">
      <button onclick="selectSlide(1)">
        <span>Item 1 </span>

      </button>
      <div class="slide__content">
        <h2>Item 1 content</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div id="slide2" class="slide">
      <button onclick="selectSlide(2)">
        <span>Item 2</span>
      </button>
        
      <div class="slide__content">
        <h2>Item 2 content</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
      
    <div id="slide3" class="slide">
      <button onclick="selectSlide(3)">
        <span>Item 3</span>
      </button>
      <div class="slide__content">
        <h2>Item 3 content</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
     
      
        <div id="slide4" class="slide">
      <button onclick="selectSlide(4)">
        <span>Item 4</span>
      </button>
      <div class="slide__content">
        <h2>Item 4 content</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>  
      
      
  </div>
</div>

<script>
  function selectSlide(selectedIndex) {
    const slides = document.querySelectorAll('.slide');
    slides.forEach((slide, index) => {
      if (index + 1 === selectedIndex) {
        slide.classList.add('selected');
      } else {
        slide.classList.remove('selected');
      }
    });
  }
</script>