JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
  <div>
    <div class="tile">
      <div class="content">Hello world !</div>
      <div class="description">Test</div>
    </div>
    <div class="tile">
      <div class="content">Hello world !</div>
      <div class="description">Test</div>
    </div>
    <div class="tile">
      <div class="content">Hello world !</div>
      <div class="description">Test</div>
    </div>
  </div>
</div>

CSS

.top {

  margin: 0 auto;
  max-width:570px;
}

.top > DIV {
  border:1px solid blue;
  display: table;

  margin: 0 auto;

}

.tile {

  font-size: 16px;

  background: lightseagreen;

  display: inline-block;

  height: 170px;

  margin: 8px;

  padding: 10px 15px;

  position: relative;

  width: 170px;

}

.tile > .description {

  bottom: 0;

  left: 15px;

  min-height: 30px;

  position: absolute;

  right: 15px;

}

.tile > .content {

  color: white;

  height: 100%;

  line-height: 16px;

  overflow: hidden;

  position: relative;

  text-overflow: ellipsis;

  vertical-align: top;

  width: 100%;

}