JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p>
    Some text.
  </p>
</div>

<div class="ratio-message">
  Message that appears conditionally
</div>

CSS

.ratio-message {
  transform: translateX(-100vw);
  transition: transform .3s;
}

@media screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) {
   .ratio-message {
     /* Whatever custom animation to reveal the message like opacity or display */
     transform: translateX(0);
   }
}