How to make a button stay in one place

I am currently creating a reactjs app that simulates a spirit box (weird I know). I have designed the spirit box to fit to the screen based on the resolution size of the display. However, I have a play button that I am struggling to make responsive and match the size of the spirit box. For example, when the resolution is 1920x1080, the button is in the right place. Yet, when the resolution is changed the button moves to a place which isn't suitable.

The first image is what the spirit box looks like in lower resolutions currently (with the button off centre) and the second image is what I would like the spirit box to look like at all times. As you can see from the image above, the button (button = smaller dark grey circle with play icon in middle) is at a random place on the screen. I want the button to cover the circle on the spirit box at all times regardless of resolution, so the user can press the middle of the box to start the sound.

JSX: JSX with button and image:

function AudioPlayer() {
    const [playSound] = useSound(staticSound, { volume: 1.0 })

    const handleClick = () => {
        playSound()
    }
    return (
      <div>
          <img src={SpiritBox} alt="SpiritBox" className='spiritImg' />

          <button className='playButton' onClick={() => handleClick()}>
            <IconContext.Provider value={{size: 40}}>
                <AiFillPlayCircle />
            </IconContext.Provider>
          </button>
      </div>
    )
}

export default AudioPlayer

Main JSX file (Just imports the above component):

function Main() {
  return (
    <div>
      <AudioPlayer />
    </div>
  )
}

export default Main

CSS (This is the CSS for the button and image jsx file):

.playButton {
  background-color: #727272;
  border-radius: 50%;
  border-width: 0;
  color: #333333;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  left: 42%;
  bottom: 120px;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0;
  padding: 10% 7%;
  text-align: center;
  transition: all 200ms;
  vertical-align: baseline;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.playButton:hover {
    background-color: #565656;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.playButton:active {
    background-color: lightgray;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

@media only screen and (max-width: 400px) {
  .spiritImg {
    width: 100%;
    height: 100vh;
    margin: auto;
  }
}

In summary, I want to make the button approximately the same size as the circle on the spirit box at all times regardless of the users resolution. I know this is a weird application but I'm just making it out pure randomness. If anyone could suggest the best way to do this that would be much appreciated. Thanks in advance!