JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="item"><div class='image-container'><img src='http://i.imgur.com/nV2qBpe.jpg' class="image"><div class='text-wrapper'><p class='text'>short short</p></div></div></div><div class="item"><div class='image-container'><img src='http://i.imgur.com/nV2qBpe.jpg' class="image"><div class='text-wrapper'><p class='text'>medium and medium</p></div></div></div><div class="item"><div class='image-container'><img src='http://i.imgur.com/nV2qBpe.jpg' class="image"><div class='text-wrapper'><p class='text'>overly attached girlfriend will chase you</p></div></div></div><div class="item"><div class='image-container'><img src='http://i.imgur.com/nV2qBpe.jpg' class="image">    <div class='text-wrapper'><p class='text'>Some text that may need to wrap into multiple lines</p></div></div></div>

CSS

.item {
  display: inline-block;
  background-color:red;
}

.image-container {
  display: table;
  background-color: blue;
  width: 1%;
  
}

img {
  height: 120px;
}

.text-wrapper {
  overflow: hidden;
  display: table-caption;
  caption-side: bottom;
  height: 60px;
  background-color: blue;
}