JSFiddle - React, Tailwind, and code Playground

by Nakul Kundra

HTML

<div class="tileBox">
<span class="tileText">sasdfsdsdfgsdfgsdfgsdfgsdfgsdfgsdffgsdfgsdfgsdfgsdfgsdfgsdfgsdgsdfgdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgdf6s</span>
  
    <img class="tileImage" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRzssrf7ITINKQggylgdMV26b4IfDUBmqp5eOPolMVqH39dZz7_">

CSS

.tileBox {
  display: flex;
  flex-direction:column;
  width: 250px;
  height:350px;
}

.tileText
{
   background: #9a7a4a;
  flex: auto;
    word-wrap:break-word;
  }

.tileImage {
  background: #8c8a3d;
  justify-content:center;
   flex: 30;
     padding:20px;
}