css-transitions.css

.flash-container {
  @apply flex flex-col flex-1 absolute;

  top: 4rem;
  right: 5rem;
}

.flash {
  @apply max-w-sm rounded-r border-l-3 shadow p-4 mb-4 inline-block relative;

  left: 0;
}

.flash-info {
  @apply border-blue-500 bg-blue-000 text-blue-700;
}

.flash-error {
  @apply border-red-dark bg-red-lightest text-red-dark;
}

.slide-away {
  left: 50rem;
  transition: left ease 1000ms;
}

flash.html

<div class="flash-container">
  <p class="flash flash-info" role="alert">
    This is an info message that has a lot more text than one would expect for a flash message
  </p>
  <p class="flash flash-error" role="alert">
    This is an error message
  </p>
</div>

<script>
  Array.from(document.querySelectorAll(".flash"))
       .forEach(el => el.addEventListener("click", function(e) {
         e.target.classList.add("slide-away");
       }));
</script>