I have a div set up like:
<div class="pt-4">
<h5>Genres:</h5>
<div class="inline-block float-left" v-for="(genre, index) in moreData.genres" :key="index">
<span v-if="index < moreData.genres.length-1" class="mr-2">{{ genre.name }},</span>
<span v-else>{{ genre.name }}</span>
</div>
</div>
However, when the content of the v-for statement is rendered, the height of the div remains unchanged. This results in the next element overlapping or floating over it. I tried adding "clear: both" but it doesn't seem like an elegant solution to me.