Need help positioning elements without them shifting around

HTML-CSS
1

So currently I have these 3 elements on the pic, and I’m using a grid to position them in a wrapper.

image

The problem is the “break time” and the pause icon elements are able to be toggled on/off, so if one of them turns off and disappears, the timer in the middle gets shifted around as the grid row changes it’s size.
Besides grid I’ve tried flexbox with various settings, but that gives me the same problem, I can’t fix the timer in place.
As a last resort I’ve also tried the position: absolute; to manually set the elements’ positions and that partially worked, but when I zoom-in and out the position of these elemts gets screwed around, which I don’t want.
What would be the “correct” or the least problematic way to achieve what i want?

3 
<div className='session-wrap'>
            {props.breakSwitch && <h2 
                className={props.pauseSwitch === true ? 'timer-paused' 
                : props.breakSwitch === true ? 'timer-on-break'
                : 'timer-active'
            }>
                Break Time</h2>}
            <h1 
                className={props.pauseSwitch === true ? 'timer-paused' 
                : props.breakSwitch === true ? 'timer-on-break'
                : 'timer-active'
            }>
                {props.displayedTime}</h1>
            {props.pauseSwitch && <FontAwesomeIcon className='pause-icon' icon={faPause} size='2xl' style={{color: "#ffa257",}} />}       
        </div>

Hope it’s not too hard to read because of the react stuff

CSS:

.session-wrap {
  background-color: rgb(34, 32, 39);
  text-align: center;
  display: grid;
  grid-template-rows: auto 250px auto;
  color: white;
  padding: 5px;
  margin: 40px auto;
  border: 1px solid #808080;
  border-radius: 40px;
  width: 550px;
  height: 400px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.session-wrap > h1 {
  margin: auto 0;
  font-size: 120px;
  text-align: center;
  display: inline-block;
}

.session-wrap > h2 {
 margin: auto 0;
}

.pause-icon {
  margin: auto auto;
  height: 70px;
}

.timer-paused {
  color: #ffa257
}

h1 is the timer

h2 is the break time sign
some settings may be unnescessary it’s because i’ve tried a lot of stuff and didn’t clean it up yet

4

I’ve realised I could use visibility: hidden; to hide elements instead of “un-rendering” them, and this way the layout stays the same, which is what i wanted