How to stack equations aligned by the = sign using MathXMLcode brought over from word.

You could use an image as you have done here.

Another solution is to use HTML as in (using Bootstrap 5)

<div class="d-flex align-items-center">
    <div class="pe-2">=</div>
    <div class="pe-2"><span class="border-bottom">[X]decarbonated</span><br>[AI]decarbonated</div>
    <div class="pe-2">x</div>
    <div class="pe-2">[AI]washed</div>
    <div class="pe-2">+</div>
    <div>[X]carb</div>
</div>

with this result

Edit: You will need to style the bottom border a bit further.

What will this be used for?

I ask because you might have better results exporting from Word to PDF (print) rather than HTML.

I don't know of any automatic way of doing this. Probably the easiest would be to have a 3 column table, with an equation in a given row...

In the center column would be the equal sign.
Everything to the left of the equal sign would be right aligned, in the left colum.
Everything right of the sign would be in the right column and left aligned.

<table>
<tr class="equation">
<td>left equation bits</td>
<td>=</td>
<td>right equation bits</td>
</tr>
<tr class="equation">
<td>some other left equation bits</td>
<td>=</td>
<td>some other right equation bits</td>
</tr>
<tr class="equation">
<td>and yet more left equation bits</td>
<td>=</td>
<td>and yet more right equation bits</td>
</tr>
</table>

Then use the first-child and last-child selectors in the css to align them...

tr.equation > td:first-child {text-align:right;}
tr.equation > td:last-child {text-align:left;}