HTML/CSS elements moving when screen is re-sized

I am making a beat maker which is nearly finished, apart from that when I reduce the screen height, the volume sliders move upwards and the other elements move to the left. How can I stop this? Any help would be great, thanks.

HTML

<div class="controls">
            <input type="range" class="volume-slider kick" max="100" min="0" value="100">
            <h1>Kick</h1>
            <button data-track="0" class="mute kick-vol">
                <i class="fas fa-volume-mute"></i>
            </button>
            <select name="kick-select" id="kick-select">
                <option value="./BeatSounds/kick-classic.wav">Classic Kick</option>
                <option value="./BeatSounds/kick-808.wav">808 Kick</option>
                <option value="./BeatSounds/kick-heavy.wav">Heavy Kick</option>
                <option value="./BeatSounds/kick-tight.wav">Tight Kick</option>
                <option value="./BeatSounds/kick-tape.wav">Tape Kick</option>
            </select>
        </div>

CSS

.volume-slider {
  display: flex;
  -webkit-appearance: slider-vertical;
  height: 3.5rem;
  margin: 1rem 0rem;
  position: absolute;
  cursor: pointer;
  outline: none;
}

.volume-slider.kick {
  left: 5vh;
  top: 19vh;
}