JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ul>
      <li class="tile">
          <div class="content">
            <div class="photo"></div>
            <h3>This is some long long long long long long long long long long long long long long long long content</h3>
          </div>
          <div class="footer">
            <input type="submit" />
          </div>
      </li>

      <li class="tile">
          <div class="content">
            <div class="photo"></div>
            <h3>This is some content</h3>
          </div>
          <div class="footer">
            <input type="submit" />
          </div>
      </li>

      <li class="tile">
          <div class="content">
            <div class="photo"></div>
            <h3>This is some content</h3>
          </div>
          <div class="footer">
            <input type="submit" />
          </div>
      </li>
    </ul>
  </body>

CSS

* {
    margin: 0;
    padding: 0;
  }

  ul {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;

    flex-direction: row;
    flex-wrap: wrap;

    -webkit-align-content: flex-end;
    align-content: flex-end;
  }

  .tile {
    width: 33%;
    display: flex;
    box-sizing: border-box;
   justify-content: space-between;
     flex-direction:column;
  }

  .content {
    background: beige;

  }

  .footer {

    background: teal;

  }