JSFiddle - React, Tailwind, and code Playground

by not important

HTML

<p id="outputBuffer"></p>

CSS

p {
    font-size: 32px;
}

.wrapper {
    position: relative;
    display: inline-block;
    width: 0.6em;
    font-size: 0.4em;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgb(255, 255, 255);
}

.top-half,
.bottom-half {
    position: absolute;
    margin: -0.9em 0;
    top: 0;
}

.top-half {
    margin: -1.8em 0;
}

.bottom-half {
    width: 0.5em;
}

CoffeeScript

inputBuffer = 'We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.'

outputBuffer = inputBuffer.toUpperCase()

pairs = outputBuffer.match /[bcdfghjklmnpqrstvwxz][aeiouy]/ig

for pair in pairs
    parts = pair.split ''
    consonant = parts[0]
    vowel = parts[1]

    holder = $('<div>')
    wrapper = $('<span>').addClass 'wrapper'
    cEl = $('<span>').addClass('top-half').html consonant
    vEl = $('<span>').addClass('bottom-half').html vowel
    wrapper.append cEl
    wrapper.append vEl
    holder.append wrapper

    outputBuffer = outputBuffer.split(pair).join holder.html()

$('#outputBuffer').html outputBuffer