valign doesn't work on all elements. It may work on tables if you were to set them to display:inline or inline-block. Just a guess, never tried it and I don't know what support is like.
In general, it works best when declared on tables cells directly wrapping content. So you could switch from using two tables, to placing your content in to table cells and adding a class to set them to display:block and width:100% when you feel it's best to stack.
I would suggest using <th> s, rather than <td> s. This is because Outlook iOS does not support stacking for <td> s, however allows <th> s to stack.
I would go with this:

<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
    <tr>
        <td class="esd-structure es-p20 esd-disabled-synchronizable-module" style="background-color: #ffffff;" align="left" esd-custom-block-id="888661" bgcolor="#ffffff" esdev-config="h242" valign="middle" style="vertical-align:center;">
            <table width="560" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="full-width" width="221" valign="middle">
                        <a target="_blank" href="https://www.fleetio.com/blog/preventive-maintenance-steps"><img class="b_image" style="border-radius: 8px; border: 1px solid #d3d9db; display: block;-ms-interpolation-mode: bicubic; clear: both;" src="https://gwkeib.stripocdn.email/content/guids/CABINET_04d24da76d8cebf505703de666f98595fc5ebca13962db87e524818ed4fe919c/images/placeholder.png" alt height="222"></a>
                    </td>
                    <td class="full-width" width="20"></td>
                    <td class="full-width" width="319" valign="middle">
                        <table width="100%" cellspacing="0" cellpadding="0" width="319" align="left">
                            <tbody>
                                <tr>
                                    <td align="left" class="esd-block-text es-m-txt-c">
                                        <h3 style="color: #f2aa2a; font-size: 16px;"><strong>Subhead</strong></h3>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="esd-block-text es-m-txt-c es-p5t es-p5b" align="left">
                                        <h2 class="b_title">Process, Benefits and Solutions for Work Order Management</h2>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left" class="esd-block-text es-m-txt-c">
                                        <p class="b_read-time" style="color: #78858a;"><em>11 minute read</em></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="esd-block-text es-m-txt-c es-p5t" align="left">
                                        <p class="b_description" style="color: #666666;">Manually tracking work orders through paper documents and spreadsheets can throw a wrench in service workflows. Digital work order management with software solutions help fleets improve workflow processes and collect reliable data in real time.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left" class="esd-block-button es-m-txt-c es-p10t">
                                        <!--[if mso]><a href="https://www.fleetio.com/blog/preventive-maintenance-steps" target="_blank" hidden>
                                            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" esdevVmlButton href="https://www.fleetio.com/blog/preventive-maintenance-steps" 
                                                        style="height:24px; v-text-anchor:middle; width:121.5px" arcsize="0%" stroke="f"  fillcolor="#ffffff">
                                                <w:anchorlock></w:anchorlock>
                                                <center style='color:#07a252; font-family:roboto, "helvetica neue", helvetica, arial, sans-serif; font-size:9px; font-weight:700; line-height:9px;  mso-text-raise:1px'>Learn More</center>
                                            </v:roundrect></a>
                                        <![endif]-->
                                        <!--[if !mso]><!-- --><span class="msohide es-button-border-1681999201715 es-button-border" style="background: #ffffff; border-radius: 0px;"><a href="https://www.fleetio.com/blog/preventive-maintenance-steps" class="es-button es-button-1681999201715" target="_blank" style="font-weight: bold; font-size: 16px; background: #ffffff; border-color: #ffffff; color: #07a252; border-radius: 0px; padding: 0px 20px 0px 0px">Learn More<img src="https://gwkeib.stripocdn.email/content/guids/CABINET_04d24da76d8cebf505703de666f98595fc5ebca13962db87e524818ed4fe919c/images/rightarrow_y4G.png" alt="icon" class="esd-icon-right" align="absmiddle" style="margin-left: 4px;" height="24"></a></span>
                                        <!--<![endif]-->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

• fyi, I also shifted the align and width attributes from the text content table cell, to the table. This is because you can encounter weird results when align="left" / align="right" aren't declared on the table. Also when only one table cell exists, it simply adapts to the full width of it's wrapping table. You're better off declaring that width on the actual table and allowing your cells to adapt to that instead.