HTML text being set by JS is overlapping other elements

I’m having this issue where the distance between HTML elements seems to be static and I have zero clue how to change it. For example hereenter image description here, the text at the top takes up so much space, but then here it is almost intersecting with the next element.enter image description here

I’m setting the content like this.

document.getElementById('route').textContent = `${bus.routeInfo.route}- ${headsignData.shortHeadsign}`

I’ve tried setting padding to fix it, same with margins and it doesn’t seem to work. Everything stays the same.

Any help appreciated.