Is there a way to place the "Tags" div beneath an image, creating a bar of tags below it? I've been struggling to position it properly without disrupting the flow of the page. Using absolute positioning is not an option as it would break the layout. Additionally, when I try to use Display:block; for the image, it doesn't occupy the whole top area of the div "pab".
html, body{
margin:0px;
padding:0px;
}
.text{
font-family: "Bangers";
font-size: 5vh;
color:white;
}
body{
background:#a89ed2;
}
#topbar{
background:#483467;
display:block;
height:calc(10vh - 1vh);
border-bottom: 1vh solid #ea5773;
}
#media{
display:flex;
flex-direction: row;
height:9vh;
padding: 0px 1vw
}
#cord img{
width:8vh;
height:auto;
margin-top:.5vh;
filter: invert(1);
}
#cord span{
position:relative;
bottom:2vh;
}
#pab{
display:inline-flex;
height:50vh;
width:40vw
}
#pab img{
height:30vh;
border:2px solid white;
}
#tags{
width:40vw;
height:20vw;
margin-top:100%;
margin-left:100%;
}<!doctype html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Bangers">
</head>
<body>
<div id=topbar>
<div id=media>
<div id=cord><img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png"><span class=text>Salt#7283</span></div>
</div>
</div>
<div id=pab><img src="https://cdn.discordapp.com/attachments/741394397064855749/742603618481471539/Webp.net-resizeimage_39.png">
<div id=tags></div>
</div>
</body>
</html>