<main class="wrapper">
    <section>
        <p class="text">
            P
            <span class="stack bouncing">.</span>
            <span class="stack">ı</span> ng
        </p>
    </section>
    <section>
        <p class="text">
            P
            <span>
                <span class="stack bouncing">.</span>
                <span class="stack">ı</span>
            </span>
            ng
        </p>
    </section>
    <section>
        <p class="text">
            P<!--This comment is required to remove whitespace created by inline-block elements.
         --><span>
                <span class="stack bouncing">.</span>
                <span class="stack">ı</span>
            </span><!--This comment is required to remove whitespace created by inline-block elements.
         -->ng
        </p>
    </section>
</main>
html {
    background-color: black;
    font-family     : "Times New Roman", Times, serif;
    font-size       : 1.5em;
    color           : #ff8a00;
}

.wrapper {
    display        : flex;
    justify-content: space-evenly;
    align-items    : flex-end;
    padding        : 0.5em 1em 0.5em 1em;
}

.text {
    margin     : 0;
    line-height: 0.55;
}

span {
    display: inline-block;
}

.stack {
    display: block;
}

/*  Bouncing Animation */

@keyframes bounce {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, -10px, 0);
    }
}

.bouncing {
    animation                : bounce 0.4s;
    animation-iteration-count: infinite;
    animation-direction      : alternate;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.