I've tried solutions I found online and on this site (adding text-align:center, vertical-align:middle; to a table data row, and for some reason, it doesn't not work out for me, the way I want it to.)
I am currently taking an online course where I'm learning how to create html responsive emails, and I'm wanting to understand the approach better of alignment of content, specifically vertically. In the example below, what I'm thinking is to either take control over the table class "content" and the TD within it, that holds the text I'm wanting to vertically align. In the code, as you can see, I added the inline style with !important hoping it would take control of it.
What approach is best, when wanting to align content this way? The screenshot below shows what I'm wanting achieve. I wonder what I am doing wrong. Edit: I've only been able to add vertical-align: bottom to the first table that has class "column" and it sucesffully sent all that content to the bottom, but I'm not sure why vertical-align: middle doesn't work :(
Screenshot what I'm wanting to achieve, with as sketch of structure
<body style="Margin:0; padding:0; min-width: 100%; background-color: #dde0e1;">
<center style="width:100%; table-layout: fixed; background-color: #dde0e1; padding-bottom: 20px;">
<div style="max-width: 600px; background-color: #FAFDFE; box-shadow: 0 0 10px rgba(0,0,0,.2);">
<!--mastertable_start-->
<table align="center" style="border-spacing: 0; color: #565656; font-family: 'Lato', sans-serif, Arial, Helvetica!important; background-color: #FAFDFE; Margin:0; padding: 0; width:100%; max-width: 600px;" role="presentation">
<!--topheader_2columns_start-->
<tr>
<td style="padding:0; background-color: blue;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="two-columns" style="padding:0; font-size:0; text-align: center;">
<table class="column" style="border-spacing:0; vertical-align: top; width:100%; max-width: 300px; display:inline-block;" role="presentation">
<tr>
<td>
<table class="content" style="border-spacing:0; text-align: left;" role="presentation">
<tr>
<td>
<img src="https://i.ibb.co/rx31TX7/html-email.png" width="200" style="max-width: 200px;" border="0">
</td>
</tr>
<tr style="padding:0px;">
<td>
<p style="font-size:17px; font-weight:bold;">Lorem ipsum this is some text</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="column" style="border-spacing:0; vertical-align: top; width:100%; max-width: 300px; display:inline-block;" role="presentation">
<tr>
<td>
<table class="content" style="border-spacing:0; text-align: left;" role="presentation">
<tr>
<td>
<img src="https://i.ibb.co/nQn29Sg/woman-teal.jpg" width="300" border="0" style="max-width: 300px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--topheader_end-->
</table>
<!--mastertable_end-->
</div>
</center>
</body>Thank you