JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="helper">
    <div class="text">Some text</div>
  </div>
</div>

<div class="wrapper">
  <div class="helper">
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, quam cum, deleniti non ipsam nisi hic asperiores ipsa dignissimos nulla, officiis odit fugiat distinctio sit, adipisci in! Magni, sapiente, sint.</div>
  </div>
</div>

CSS

.wrapper {
  width: 200px;
  height: 300px;
  background: #ddd;
  position: relative;
  float: left;
  margin: 20px;
}

.helper  {
  width: 100%;
  height: 100%;
  display: flex;
  transition: all .3s linear;
}

.wrapper:hover .helper {
  height: 0;
}

.text {
  width: 100%;
  border:1px solid red;
  margin-top:auto;
  padding: 10px;
}