working option

by ShaCP

HTML

<div class="container">
<div class="grow">
<button class="force_slide_out">
OPEN/CLOSE PINK
</button>
</div>
<div class="slideright">
</div>
<div class="padding">

</div>
</div>

CSS

body {
  margin: 0;
}

.grow {
  background-color: lightpink;
  position: relative;
}

.grow,
.padding {
  width: 100%;
  min-width: 0;
  transition: 1s min-width linear, 1s width linear;
}

.slideright {
  background-color: lightblue;
  position: relative;
  min-width: 400px;
  /* instead of margin, to center you can also use justify-content: center on 
  the container, but you must remove it in the 549px media query. */
  margin: 0 auto;
}

.container {
  height: 100vh;
  margin: auto;
  max-width: 700px;
  overflow: hidden;
  /*   justify-content: center; */
  display: flex;
}

/* button */

.force_slide_out {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 9999;
  white-space: nowrap;
}



/* end button code */

.slideright::before {
  content: "middle of screen";
  writing-mode: vertical-rl;
  text-orientation: upright;
  border-left: 1px solid black;
  width: 1px;
  margin: 0;
  display: block;
  height: 100%;
  position: absolute;
  left: 50%;
}

@media screen and (max-width: 549px) {
/*   .container {
    justify-content: unset;
  } */

  .grow,
  .padding {
    width: 0;
  }

  .grow.open {
    min-width: 150px;
  }

  .slideright {
    min-width: 400px;
  }

  .grow.open~.slideright::before {
    content: "";
  }
}

@media screen and (max-width: 399px) {
  .slideright {
    min-width: 100vw;
  }
}

/* */

JavaScript

const button = document.querySelector(".force_slide_out");
const menu = document.querySelector(".grow");
button.addEventListener("click", () => menu.classList.toggle("open"))