I am attempting to display two divs next to each other while iterating through props (which are essentially an array) in VueJS. When I have just a single element, everything functions properly. However, as soon as I include the v-for directive, the elements no longer appear side by side.
<div class="row">
<div v-for="(data,index) in data" :key="index" class="col-12">
<div v-if="data.image" class="col-xs-12 col-md-3 image-div">
<img class="image" :src="data.image" alt="image">
</div>
<div class="col-xs-12 col-md-9">
<p class="title">{{data.title}}</p>
<p class="description">{{data.description}}</p>
<p class="bottom">
<span class="left"><span class="tag">{{data.tag}}</span><span class="time"> | {{data.time}}</span></span>
<span class="right"><v-icon>bookmark</v-icon><v-icon>share</v-icon></span>
</p>
</div>
</div>
</div>
The provided code snippet showcases the approach I am utilizing