HTML email show a text vertically centered to the image responsive - html

Question

This is what i have currently developed. I would like the text to be right of the image and vertically center aligned with respect to the image in desktop view and to the bottom of the image in mobile view. You are free to change the entire html markup if required to achieve this.
NOTE the image is bigger than the text.
<table class="col-2 mobile-full-width" style="width:100%;">
<tbody>
<tr>
<td text-align="center" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border-top: 0;border-bottom: 0;padding-top: 20px;text-align: center;padding-bottom: 0;vertical-align: center;text-align: center;vertical-align: middle;vertical-align: center;">
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="220" style="width:220px;">
<![endif]-->
<table class="profile-label mobile-full-width" width="220px" style="width:220pt; float:left;" align="left">
<tbody>
<tr>
<td width="220">
<img src="https://static.pexels.com/photos/1029/landscape-mountains-nature-clouds.jpg" width="500" height="310" border="0" style="display: block;" alt="">
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</td>
<td valign="middle" width="440" style="width:440px;">
<![endif]-->
<table class="profile-description mobile-full-width" width="440px" style="width:440px;height: 100%;vertical-align: center;" align="left">
<tbody style="vertical-align: middle;">
<tr>
<td class="field-column" style="word-break: break-all;">
some text that should be vertically center alligned
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>

Answer 1

Change height: 100% to the height of the image. Try something like height: 310px to .profile-description
Change this..
<table class="profile-description mobile-full-width" width="440px" style="width:440px;height: 100%;vertical-align: center;" align="left">
To this....
<table class="profile-description mobile-full-width" width="440px" style="width:440px;height: 310px;vertical-align: center;" align="left">
Hope this helps

Answer 2

Use vertical-align:middle.
div.container, div.img, div.text {
display:inline-block;
vertical-align:middle;
}
div.img {
width:300px;
height:200px;
background-color:green;
}
div.text {
background-color:red;
}
<div class="container">
<div class="img">IMAGE HERE</div>
<div class="text">
Some text here !
</div>
</div>

Answer 3

Only way to do this that works in most of the popular email clients is to break the image into two. This is how i did it, might not be the best solution out there.
The part that should come above the sentence.
Rest of the image and the text next to it.