How do I overlap letters with the left letter being on top and the right letter being on bottom?

I am trying to overlap letters in a <p> element with the left letter being on top, I have tried putting each letter in a span and setting the z-index, however that seems not to work, CodePen. I want the left-er letter on top of the right-er letter.

How may I go about overlapping the letters left on top right on bottom?

Code:

@font-face {
  font-family: 'CloudySunday';
  src: url('https://fritzfromtechsupport.com/fonts/CloudySunday.ttf') format('truetype');
}

<div>
  <p style="letter-spacing: -0.8rem;font-family: 'CloudySunday';">
    <span style="z-index: 1000;color: green;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
  h
</span>
    <span style="z-index: 100;color: red;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
  i
</span>
  </p>
</div>

Solution

You can set display: grid; on the <p> element, and display both <span> elements in grid-area: 1 / 1; (first row, and first column).

Demo (I've switch the "i" with an "a" so it would be visible under the "h"):

@font-face {
  font-family: 'CloudySunday';
  src: url('https://fritzfromtechsupport.com/fonts/CloudySunday.ttf') format('truetype');
}

p {
  display: grid;
}

span {
  grid-area: 1 / 1;
}

<div>
  <p style="letter-spacing: -0.8rem;font-family: 'CloudySunday';">
    <span style="z-index: 1;color: green;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
      h
    </span>
    <span style="color: red;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
      a
    </span>
  </p>
</div>