display a modal from right to left and content inside another div

I would like to make my modal contained in the container (the red area).

When I set position to relative, the modal opens from left to right whereas I want it to open from right to left
And the modal goes after the button when I want it to go over everything in the red area.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#container{ background-color:red; width: 100%; height: 300px  }

.modal {
    display: block; 
    position: absolute; 
    z-index: 99; 
    right: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
    animation: slide-in 1s linear 1;
  }

@keyframes slide-in { 0% { width: 0; } 25% { width: 25%; } 50% { width: 50%; } 75% { width: 75%; } 100% { width: 100%; }
}

.modal-content { background-color: #fefefe; margin: 20px;  padding: 20px;  border: 1px solid #888; 
}

<!-- language: lang-html -->

<div id=container> 
<button id="open-modal-btn">Open modal</button>
</br>
<div id="my-modal" class="modal">
  <div class="modal-content">
    <h2>title</h2>
    <p>content</p>
  </div>
</div>
</div>

<!-- end snippet -->

UPDATE: Sorry I mis-read your original post. In any case, the technique below is still preferred; just swap values.

To get a from-left slide with your current code as it exists, change right to left in your modal class.

.modal {
    /* Change right to left */
    /* right: 0; */
    left: 0;
}

However your slide-in technique is awkward. You're achieving a slide by growing the width of the modal, so semantically this is a "grow-in". You're lucky that your content is not warping, and that it happens to appear as a "slide-in". A more elegant way to actually slide-in would be to use transform: translate(0,0) on the modal.

Instead I'd do this, roughly:

Codepen link

.modal {
    /* ... */

    /* Gives motion to changed properties like transform */
    transition: all 0.5s ease;

    /* Default off-screen left */
    transform: translate(-100%,0);

    /* Default off-screen right */
    /* transform: translate(100%,0); */
}

.modalOpened .modal {
    /* Set back to zero (center of viewport) */
    transform: translate(0,0);
}

In addition, in your modal open event (the button click) simply toggle a class modalOpened on the app container. No keyframes needed. Just a natural, and actual, slide-in.