Adding video captions tracks dynamically puts them in the wrong order

Question

When I try and add video text tracks to videoJs player, it adds them in the wrong order where the new track appears above the previous track.

I have created a jsFiddle to show this, can anyone help solve how I fix this?

https://jsfiddle.net/ts9qogdh/3/

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{ }' muted>
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  </video>

var currPlayer = videojs("my_video_1")

currPlayer.play()
currPlayer.addTextTrack("captions", 'english', 'en');

window.setInterval(() => {
  let currentTime = currPlayer.currentTime();
  const activeCue = new VTTCue(currentTime, currentTime + 2, currentTime + 2)

  var tracks = currPlayer.textTracks();
  let existing = tracks.tracks_.find(x => x.kind === 'captions' && x.language === 'en');

  existing.mode = 'showing';
  existing.addCue(activeCue);
}, 1000)

Answer 1

This CSS should work. Although, in IE11 the captions are a bit spaced-out...

.vjs-text-track-display > div {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.vjs-text-track-cue {
    position: initial !important;
}