Make a div hide with left to right hide animation

Hi guys I have a situation where I have to hide a div from left to right with a hide animation.

Here is a demo

When I click on the full screen toggle button, I want the code editor to take full screen. Currently I am doing this:

(e) => {
  $(e.target).children('i').toggleClass('rotate180');
  $('.editor-container').toggleClass('full-width');
  $('.input-output-container').toggleClass('hide');
 }

Here are the definition for '.editor-container', '.input-output-container', '.full-width' and '.hide'

  .editor-container {
  width: 50%;
  transition: width 0.5s ease;

  &.full-width {
    width: 100%;
  }
 }

.input-output-container {
  width: 50%;
  padding: 1rem 1.5rem;
  min-height: calc(100vh - 8.4vh);
  background-color: gt.theme-var(ide-bg-1, null, $thememaplight, $cssvars);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;

  &.hide {
    animation: slide_right 0.5s ease;
    animation-fill-mode: forwards;
  }
 }
   
@keyframes slide_right {
   0%{
     width: 50%;
    }
    
 100%{
  width: 0%;
  padding: 0;
 }
}

There is a weird collapse of the .input-output-container because I am setting the padding and width to 0.

We can see a flash of the scrollbar towards the end and the placeholders getting squished. I want to make the slide out animation as smooth, good looking as the slide in animation.

Is there any other way I can achieve this animation without setting the width, padding to 0.

Any help is appriciated.

Thank you.