Tengo un versus el cual va lanzando personajes random. De un lado tengo el personaje1 y del otro al personaje2 y en el medio la palabra vs. El problema es que al ser palabras random nunca está centrado el "vs" ya que hay palabras más grande que otras y esta se va rotando mucho y me quedan cosas como estas
Quiero que a pesar de cual sea la palabra el "vs" siempre quede centrado aunque los personajes sean diferentes.
<p className="tematica__versus">{tematicaRandom.personaje1}
<span className="tematica__vs">vs</span>
{tematicaRandom.personaje2}
</p>
.tematica__versus{
font-size: 80px;
color: #e1e1e1e1;
font-weight: 700;
margin-top: 70px;
text-align: center;
}
.tematica__vs{
padding: 0 20px;
}