how to force a line break in vtt for video

Question

I'm using the video track tag to insert captions and titles in my video. I have a vtt file, but I need a line break between lines 1 and 2. The text is showing up in the right spot, but on one line. How do I force a line break between the speaker and his title, please? A simple break in the vtt file doesn't do it.

vtt:

WEBVTT   This must be the first line followed by 2 returns

1
00:00.100 --> 00:04.999 position:0% align:left size:70%
JOE BLOW
survivor

HTML:

<div id="vid-container1" class="vid-container">

         <div class="speakers">  
          <div class="cap-wrap">
            <span id="room-speakers" class="display-speakers">
              <span></span>
            </span>
          </div>
        </div>

        <video id="video" poster="img/screen3.png" autoplay="autoplay" loop preload="metadata" muted playsinline>
            <source src="video/room.mp4" type="video/mp4"/>


            <track id="track-roomspeakers" default 
                    src="video/room-speakers.vtt" 
                    kind="metadata" 
                    srclang="en"
                    label="English Captions"/>


        </video>
</div>

javascript:

showTrack('track-roomspeakers', 'room-speakers');

    function showTrack(trackID, displayID) {
        document.addEventListener("DOMContentLoaded", function () {  // don't run this until all DOM content is loaded
              var track = document.getElementById(trackID);
              track.addEventListener("cuechange", function () {
                var myTrack = this.track;             // track element is "this"
                var myCues = myTrack.activeCues;      // activeCues is an array of current cues.
                if (myCues.length > 0) {
                    console.log(displayID);
                  var disp = document.getElementById(displayID);
                  disp.style.display = "block";
                  var div = document.createElement('div')
                  for (var i = 0; i < myCues.length; i++) {
                    div.appendChild(myCues[i].getCueAsHTML());
                    //console.log(myCues[i]);
                  }
                  disp.replaceChild(div, disp.childNodes[1]);
                } else {
                  var disp = document.getElementById(displayID);
                  disp.style.display = "none";
                }

              }, false);
            }, false);

        var subtitles = document.getElementById(trackID);
        for (var i=0; i<video.textTracks.length; i++) {
          video.textTracks[i].mode='hidden';
        }
    }

css:

.display-speakers {
  font-family: 'proxima-nova', sans-serif;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 21px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.29);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 10;
}
.speakers {
  display: flex;
  justify-content: flex-end;
  align-items: left;
  flex-direction: column;
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  margin-left: 60px;
}
.cap-wrap {
  width: 40%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}

Answer 1

As James mentioned, I had to change my vtt file slightly to add an alert string, then later substitute a <br> for that string:

vtt:

WEBVTT   This must be the first line followed by 2 returns

1
00:00.100 --> 00:04.999 position:0% align:left size:70%
JOE BLOWtitlealert
survivor

javascript:

document.addEventListener("DOMContentLoaded", function () {  // don't run this until all DOM content is loaded
              var track = document.getElementById(trackID);
              track.addEventListener("cuechange", function () {
                var myTrack = this.track;             // track element is "this"
                var myCues = myTrack.activeCues;      // activeCues is an array of current cues.
                if (myCues.length > 0) {

                  var disp = document.getElementById(displayID);
                  disp.style.display = "block";
                  var div = document.createElement('div');

                  for (var i = 0; i < myCues.length; i++) {
                    div.appendChild(myCues[i].getCueAsHTML());
                    var mystring = div.innerHTML;
                    if (mystring.indexOf("titlealert") >= 0) {
                        mystring = mystring.replace("titlealert","<br>");//make titles appear with name on one line, title on second line; only do this for speaker titles
                        div.innerHTML = mystring;
                    } 
                }

                 disp.replaceChild(div, disp.childNodes[1]);

                } else {
                  var disp = document.getElementById(displayID);
                  disp.style.display = "none";
                }

              }, false);
            }, false);