JSFiddle - React, Tailwind, and code Playground

by Renan Ribeiro Brando

HTML

<div class="card">
  <div class="img flex">Image</div>
  <div class="text flex">
    <h1>Hello</h1>
    <p>sample</p>
    <p>sample</p>
  </div>
</div>

CSS

.card {
  background-color: grey;
  height: 300px;
  width: 220px;
  position: relative;
}

.text {
  text-align: right;
}


.flex {
  display: flex;
  flex:1;
  flex-direction: column;
}

.img {
  position: absolute;
  top: 50%;
  
}