JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <h1>Some Heading - 
  <span id="zk-trigger">
    A<span id="hide1" class="hide">bcd-</span>
    W<span id="hide2"  class="hide">xyz</span>
  </span>
  | Anything Else</h1>
</header>

CSS

#hide1, #hide2{
  display: inline-block;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.2s, opacity 0.2s;
}

#zk-trigger:hover #hide1, #zk-trigger:hover #hide2{
  max-width: 100px;
  opacity: 1;
  transition: max-width 0.2s, opacity 0.2s;
}