JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="one"><p>I'm the text</p></div>
  <div class="two"><p><a>I'm the link in the page</a>
    <a href="http://vimeo.com/" target="_blank" style="color: rgb(82, 19, 197);">vimeo</a><sup>➶</sup>
  </p></div>


</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);

}
.one{
   grid-column: 1 /5;
  grid-row: 1;
    background-color:pink;
}
.two{
   grid-column: 5 / 8;
  grid-row: 1;
  background-color:yellow;
}
.three{
   grid-column: 8 / 13;
  grid-row: 1;
  background-color:yellow;
}

JavaScript

function nextLetter(ch) {
    if (!ch.match(/[a-z]/i)) return ch;
    else if (ch === 'Z') return 'A';
    else if (ch === 'z') return 'a';
    return String.fromCharCode(ch.charCodeAt(0) + 1);
}
$(document).ready(function(){
  $('.one p, .two p a').each(function() {
      var letters = $(this).text();
      var nHTML = '';
      for(var letter of letters) {
          nHTML+="<span class='x'>"+letter+"</span>";
      }
      $(this).html(nHTML);
      $(".x").hover(function(e) {
          if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
      });
})});