JSFiddle - React, Tailwind, and code Playground

HTML

<div id="good">GOOD</div>

<div>BAD</div>

<p>Hover the boxes. The top box is ok, but the bottom box moves the text slightly when finished</p>

CSS

div {
    height: 100px;
    width: 100px;
    margin: 30px;
    background: blue;
    font: 29px/100px Arial, sans-serif;
    color: #fff;
    text-align: center;
}

#good {
    font-size: 30px;
}
div:hover {
    -webkit-animation: move 0.7s ease-out forwards;
    -moz-animation:    move 0.7s ease-out forwards;
    animation:         move 0.7s ease-out forwards;
}

@-webkit-keyframes move {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(90deg); }
}

@-moz-keyframes move {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(90deg); }
}

@keyframes move {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(90deg); }
}