Position CSS, font menggeser box / div yang lainnya

Selamat siang teman2 sekolah koding,

saya ingin bertanya mengenai position font, saya mempunyai sebuah kasus seperti ini, (saya melampirkan foto kasus, link di paling bawah)

dalam sebuah box saya mempunyai div element : foto, font, tombol dan arrow. celakanya setiap font bertambah banyak maka font tersebut akan menggeser div tombol dan arrow yang ada di bawahnya, bagaimana cara saya untuk membuat, meskipun font bertambah banyak tapi dia tidak akan pernah menggeser arrow dan tombol. berikut coding nya.

html :

{{address}}

Take Me There

Call

css :

#tapbox { text-align: center; width: 80vw; height: 35vh; border-radius: 7px; background-color: white; color: black; position: absolute; top:50%; left:50%; margin-top: -46vh; opacity: 0.8; z-index: 100; margin-left: -39.5vw; border : 1px solid black;

}

#picture{ width:100%; height:70%; } .tapbox-text{ text-align: center; float: left; width: 100%; margin-top: 10px; }

#font{ position:relative; bottom:15px; left:10px; text-align : left; font:arial 12px;

}

#button{ position:relative; bottom: 6.1vh;

}

.arrow-down { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid ; margin-left: 36.5vw; z-index: 90; margin-top:-6.8vh; }

.tombol{ height:3vh; }

berikut link gambar :

Saat normal :

https://www.dropbox.com/s/5bdeoh9fd3pvivm/ss1.png?dl=0

saat error :

https://www.dropbox.com/s/57kx6rruy6heqnh/ss2.png?dl=0