html - How to align div on the bottom inside table cell -

i want content of second div bottom-aligned 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;">            want text on same line bottom of image          </div>        </div>      </td>    </tr>  </table>

you can table , 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">            want text on same line bottom of image          </div>        </div>      </td>    </tr>  </table>

though i'd suggest styling on separate css file or embedding it, rather adding 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">            want text on same line bottom of image          </div>        </div>      </td>    </tr>  </table>

if want have text @ bottom, centered, can add text-align: center.