How to let element align and center without using align-items and justify-content?

It should work for html email, so I can't use align-items and justify-content

I want to let elements center on the same line, align left and right.

I have try to set display: inline-block; to let them in the same line, but text-align: start and text-align: end is not working.

<div style="width: 100%; height: 65%; background-color: pink">
  <div style="display: inline-block; text-align: start">
    <p>Left and Center</p>
  </div>
  <div style="display: inline-block; text-align: end">
    <p>Right and</p>
  </div>
  <div style="display: inline-block; text-align: end">
    <p>Center</p>
  </div>
</div>

Solution

Use Display: table and Display: table-cell and add Vertical-align: middle.

[![enter image description here][1]][1]

Try with the below code:

<div style="width: 100%; height: 200px; background-color: pink; display: table; table-layout: fixed;">
  <div style="display: table-cell; text-align: start; vertical-align: middle;">
    <p>Left and Center</p>
  </div>
  <div style="display: table-cell; text-align: end; vertical-align: middle;">
    <p>Right and</p>
  </div>
  <div style="display: table-cell; text-align: end; vertical-align: middle;">
    <p>Center</p>
  </div>
</div>


  [1]: https://i.sstatic.net/EOEI9.png