How to align div on the bottom inside table cell

Question

I want the content of the second div to be bottom-aligned with the image.

<table>
  <tr>
    <td>
      <div>
        <div style="float: left;">
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div style="float: right; vertical-align: bottom;">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

Answer 1

You can do this with the table and table-cell display properties.

<table>
  <tr>
    <td>
      <div style="display:table">
        <div style="display:table-cell">
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div style="vertical-align: bottom; display: table-cell">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

Though I'd suggest you do the styling on a separate CSS file or embedding it, rather than adding it inline. Example:

.outer {
  display: table;
}

.inner {
  display: table-cell;
  vertical-align: bottom;
}

<table>
  <tr>
    <td>
      <div class="outer">
        <div>
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div class="inner">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

If you want to have the text at the bottom, but also centered, you can add text-align: center.

Answer 2

You can add display: table-cell to div elements inside table:

table tbody tr td div div {
  display: table-cell;
}

<table>
  <tr>
    <td>
      <div>
        <div>
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="max-width: 200px; max-height: 200px;" />
        </div>
        <div style="vertical-align: bottom;">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>