JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="card-display">
  <div>
    always need top line visible
  </div>
</div>
</div>

CSS

.container {
  display:flex;
  align-items: center;
  justify-content: center;
  position:absolute;
  width: 100%;
  height: 100%;
}
.card-display {
  align-items:center;
  position:absolute;
  width: 300px;
  height: 400px;
  border-radius: 10px;
  background-color: gray
}


@media screen and (max-height:400px) {
  body {
    background-color: blue;
  }
  .container {
     align-items:baseline;
  }
}