JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table" style="max-width:100%">
    <tbody>
    <tr class="row-eq-height">
    <td class="child col-xs-6 col-sm-4 col-md-4">
    <img class="photo" src="photos/1.jpeg">
    <div class="test">Basic Tomato Spaghetti<br>14<br>Pasta House<br>Raviolli<br>
    <a href="/reserve.php?id=1" class="btn btn-default btn-md" role="button">button!</a></div></td>
    <td class="child col-xs-6 col-sm-4 col-md-4">
    <img class="photo" src="photos/pigeons.jpg">
    <div class="test">Pepperoni Special<br>9<br>Pasta House<br>pizza<br><a href="/reserve.php?id=3" class="btn btn-default btn-md" role="button">Button!</a></div></td>
    <td class="child col-xs-6 col-sm-4 col-md-4">
    <img class="photo" src="photos/qr2.png">
    <div class="test">Cheese Taco<br>15<br>Pasta House<br>sauce<br><a href="/reserve.php?id=4" class="btn btn-default btn-md" role="button">Button!</a></div></td>
    </tr>
    <tr class="row-eq-height">
    <td class="child col-xs-6 col-sm-4 col-md-4">
    <img class="photo" src="photos/14737957596980-b.jpg">
    <div class="test">qwerty<br>16<br>Pasta House<br>asdfg<br><a href="/reserve.php?id=5" class="btn btn-default btn-md" role="button">Button!</a></div>
    </td>
    </tr>
</tbody>
</table>

CSS

.table > tbody > tr {
  display: flex;
}

.table > tbody > tr> td {
  max-width: 300px;
  display: flex-inline;
  flex-direction: column;
  justify-content: space-between;
}

.test {

  bottom: 10px;
  max-width: 100%;
}

.photo {
  max-width: 100%;
  /*width: 100%;*/
  max-height: 300px;
  padding-bottom: 10px;
  display: block;
}