element shifts when span appears in react-CodePudding

Im currently using React and rendering a span whenever a user hovers over the text element. The issue is that the existing text will shift leftwards(span will appear right of the text), whenever the span appears. Expected behavior is for the span to just appear on right of the text without shifting the text. Is there any way I can do this with css? Please see below for code:

<TableCell 
  classes={{ root: classes.tableCell }} 
  onm ouseEnter={() => this.handleMouseEnter(index)} 
  onm ouseLeave={() => this.handleMouseLeave(index)} 
  align="center">
      Hello
      {(isHovering) && <span>{this.getTitle(movie.title)} />}
 </TableCell>

CodePudding user response：

It looks like you're missing the closing tag of your span.

Try this:

<TableCell
                                classes={{ root: classes.tableCell }}
                                onm ouseEnter={() => this.handleMouseEnter(index)}
                                onm ouseLeave={() => this.handleMouseLeave(index)}
                                align="center">
                                Hello
                                {(isHovering) && <span>{this.getTitle(movie.title)} </span>}
 </TableCell>