How to fix vertical alignment with line height while making email template with mjml?

Question

I am a complete noob to email development and so is the case with some properties of CSS like line-height and vertical align. I want to align an image vertically centered with the image but I am unable to do. I have added the word problem before the section that is causing the problem. I tried adding line heights to the parent and child but it didn't affect the result. P.S. I would really appreciate it if you could help me too in understanding these two properties 1) line-height 2) vertical-align I am very comfortable with using flex but I've found these properties really hard to understand.

<mjml>
  <mj-head>
    <mj-font name="Questrial" href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" />
    <mj-attributes>
      <mj-text font-family="Questrial, sans-serif" font-size="16px" color="#353b48" padding="0px" line-height="24px" />
      <mj-section padding="0px" />
      <mj-image padding="0px" />
      <mj-button background-color="#75bac4" font-size="15px" color="#ffffff" font-family="Inter, sans-serif" text-transform="uppercase" border-radius="50px" font-weight="500" />
    </mj-attributes>
  </mj-head>
  <mj-body width="600px" background-color="#fff">
    <!-- 01:logo -->
    <mj-section border-top="1px solid #e6e6e6" border-left=" 1px solid #e6e6e6" border-right="1px solid #e6e6e6" padding-top="30px">
      <mj-column width="100%">
        <mj-image width="540px" src="https://i.imgur.com/oIVfA76.png" alt="logo" />
      </mj-column>
    </mj-section>


    <!-- middle section 02 -->
    <mj-section padding="48px 30px 0px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
      <mj-column width="100%">
        <mj-text align="left" font-size="21px" line-height="26px" color="#141414">
          Hi Jenny,
        </mj-text>
        <mj-spacer height="30px" />
        <mj-text>
          Welcome to FreshFeelz
          <br><br>
          Thank you for registering your business Xenex Media.
          <br><br>
          To access your dashboard and to create your deal offers, download the FreshFeelz Partner App.
        </mj-text>
        <mj-spacer height="50px" />
      </mj-column>
    </mj-section>
    <!-- problem -->
    <mj-section padding="0px 30px 30px 30px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
      <mj-column width="50%" vertical-align="middle" padding="15px 0px">
        <mj-text line-height='60px' container-background-color="#e4e5d6">
          <img src="https://i.imgur.com/1rG8AmG.png" height="50" width="50" alt="" style="vertical-align:bottom;" />
          &nbsp;&nbsp;&nbsp;
          <span style="vertical-align:top;display:inline-block;height:50px;">FreshFeelz Partner App</span>
        </mj-text>
      </mj-column>
      <mj-column width="50%" vertical-align="middle" padding="15px 0px">
        <mj-text line-height="60px" container-background-color="#d4f6f5">
          <img src="https://i.imgur.com/9LuyZ9f.png" style="vertical-align:bottom" height="50" width="50" />
          &nbsp;&nbsp;
          <a style="color:inherit;text-decoration:none;vertical-align:top;display:inline-block;height:50px;" href="www.freshfeelz.com.au">visit www.freshfeelz.com.au</a>
        </mj-text>
      </mj-column>
    </mj-section>
    <!-- login details -->
    <mj-wrapper padding="0px 30px 60px 30px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
      <mj-section background-color="#eaeee2" padding="25px 0px">
        <mj-column width="38%" vertical-align="middle">
          <mj-text align="left" font-size="21px" line-height="30px" letter-spacing="2.1px">
            LOGIN DETAILS
          </mj-text>

        </mj-column>
        <mj-column width="50%" vertical-align="middle">
          <mj-text>
            Email: as13@xenex-media.com.au
            <br>
          </mj-text>
          <mj-text>
            Password: @xenex1234
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>

    <!-- how it works -->
    <mj-section padding="0px 30px 0px 30px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
      <mj-column width="100%">
        <mj-text align="center" font-size="21px" line-height="24px">
          FreshFeelz works in 3 simple steps
        </mj-text>
        <mj-spacer height="30px" />
      </mj-column>
    </mj-section>
    <!-- 3 column features -->
    <mj-section border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6" padding-bottom="30px">
      <!-- step 1 -->
      <mj-column width="160px" vertical-align="top" padding="15px 0">
        <mj-image src="https://i.imgur.com/PZYQJcT.png" height="50px" width="50px" />
        <mj-spacer height="10px" />
        <mj-text font-size='12px' line-height="24px" letter-spacing="2.4px" align="center">
          STEP 1
        </mj-text>
        <mj-spacer height="10px" />
        <mj-text align="center" font-size="18px" line-height="24px">
          Create deals instantly
        </mj-text>
        <mj-spacer height="10px" />
        <mj-text align="center">
          Remember higher discounts and appealing images will increase sales.
        </mj-text>
      </mj-column>
      <mj-column width="40px" vertical-align="top" padding="15px 0">
        <mj-image src="https://i.imgur.com/wnzirMx.png" height="40px" width="40px" />
      </mj-column>
      <!-- step 2 -->
      <mj-column width="160px" vertical-align="top" padding="15px 0">
        <mj-image src="https://i.imgur.com/57AnJRY.png" height="50px" width="50px" />
        <mj-spacer height="10px" />
        <mj-text font-size='12px' line-height="24px" letter-spacing="2.4px" align="center">
          STEP 2
        </mj-text>
        <mj-spacer height="10px" />
        <mj-text align="center" font-size="18px" line-height="24px">
          Shop Orders
        </mj-text>
        <mj-spacer height="10px" />
        <mj-text align="center">
          Update the order for delivery / pick up.
        </mj-text>
      </mj-column>
      <mj-column width="40px" vertical-align="top" padding="15px 0">
        <mj-image src="https://i.imgur.com/wnzirMx.png" height="40px" width="40px" />
      </mj-column>
      <!-- step 3 -->
      <mj-column width="160px" vertical-align="top" padding="15px 0">
        <mj-image src="https://i.imgur.com/zEaWZWr.png" height="50px" width="50px" />
        <mj-spacer height="10px" />
        <mj-text font-size='12px' line-height="24px" letter-spacing="2.4px" align="center">
          STEP 3
        </mj-text>
        <mj-spacer height="10px" />
        <mj-text align="center" font-size="18px" line-height="24px">
          Deal Offers
        </mj-text>
        <mj-spacer height="10px" />
        <mj-text align="center">
          On completion don't forget to mark the deal as redeemed.
        </mj-text>
      </mj-column>
    </mj-section>

    <mj-section padding="0px 40px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
      <mj-column width="100%">
        <mj-text align="center">
          Once an order is shipped or a deal is redeemed you will receive
          a payment within 7 days.
          <mj-spacer height="30px" />
        </mj-text>
      </mj-column>
    </mj-section>
    <!-- Need help section -->
    <mj-wrapper padding="30px " border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
      <mj-section padding="15px 30px " background-color="#ebe5d6">
        <mj-column width="50%" vertical-align="middle" padding="15px 0">
          <mj-image src="https://i.imgur.com/mdnqlm2.png" width="75px" height="75px" />
          <mj-spacer height="10px" />
          <mj-text font-size="21px" line-height="24px" letter-spacing="2.1px" align="center">
            NEED HELP?
          </mj-text>
        </mj-column>
        <mj-column width="50%" vertical-align="middle" padding="15px 0">
          <mj-text>
            You will receive a Welcome Call within 72 hours from one of our Business Managers. This
            is your chance to ask any questions and to help get some deals posted if you haven’t already.
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
    <!--download customer app  -->
    <mj-wrapper padding="0px 30px 50px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
      <mj-section border-top="3px solid #141414" border-bottom="3px 
      solid #141414" padding="30px 0">
        <mj-column width="100%">
          <mj-text align="center" font-size="18px" line-height="24px">
            Don’t forget to also download our customer app &nbsp;&nbsp;
            <img src="https://i.imgur.com/nn60YqO.png" height="36px" width="36px" style="vertical-align:middle" />
          </mj-text>
          <mj-spacer height="30px" />
          <mj-text align="center">
            And enter
            <span style="color:#141414">referral code FFAWE1</span> <br>
            when registering for $5 off your own first purchase!
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
    <!-- download the app -->
    <mj-section padding="0px 0px 60px 0px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
      <mj-column width="50%" vertical-align="middle" padding="0px 15px 0px 0px ">
        <mj-image src="https://i.imgur.com/jKeSpEb.png" width="255px" />
      </mj-column>
      <mj-column width="50%" vertical-align="middle" padding="15px">
        <mj-text font-size="18px" line-height="30px">
          Stay up-to-date with your
          FreshFeelz bookings
        </mj-text>
        <mj-spacer height="10px" />
        <mj-text>
          Our Partner app lets you manage
          your deals, bookings and more.
        </mj-text>
        <mj-spacer height="20px" />
        <mj-text align="left" line-height="45px">
          <!-- appstore -->
          <a href="#" style="text-decoration: none;display:inline-block;height:35px;"><img src="https://i.imgur.com/xVnQerH.png" width="115" style="height:35px" height="35" /></a>
          &nbsp;
          <!-- google play -->
          <a href="#" style="text-decoration: none;display:inline-block;height:35px;"><img src="https://i.imgur.com/Zk4J2eA.png" width="105" height="35" style="height:35px;" /></a>
        </mj-text>
      </mj-column>

    </mj-section>
    <!-- 03:footer Main -->
    <mj-section padding="30px 20px" background-color="#ebe5d6">
      <mj-column width="75%" vertical-align="middle">
        <mj-text>
          <a href="#" style=";text-decoration: none;display:inline-block;color:#353b48">
            Help Center
          </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#" style=";text-decoration: none;display:inline-block;color:#353b48">
            Privacy Policy
          </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#" style=";text-decoration: none;display:inline-block;color:#353b48">
            Terms &amp; Conditions
          </a>
        </mj-text>
      </mj-column>
      <mj-column width="25%" vertical-align="middle">
        <mj-text line-height="49px">
          <a href="#" style="text-decoration: none;display:inline-block;"><img src="https://i.imgur.com/ssftYug.png" width="32" height="32" style="height:32px;" /></a>
          <a href="#" style="text-decoration: none;display:inline-block;margin:0px 0px 0px 5px"><img src="https://i.imgur.com/vRERJBi.png" width="36" height="36" style="height:36px;" /></a>
          <a href="#" style="text-decoration: none;display:inline-block;"><img src="https://i.imgur.com/Eu54USu.png" width="41" height="41" style="vertical-align:text-bottom;height:41px;" /></a>
        </mj-text>
      </mj-column>
    </mj-section>
    <!-- footer Secondary -->
    <mj-section background-color="#92a294" padding="18px 0">

      <mj-column width="100%">
        <mj-text align="center" color="#fff">
          <a href="#" style="text-decoration: none;display:inline-block;color:#fff;">
            hello@freshfeelz.com.au</a>&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;
          <a href="#" style="text-decoration: none;display:inline-block;color:#fff;">
            www.freshfeelz.com.au</a> </a>
        </mj-text>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>