After delving into the world of traditional CSS flex properties and incorporating some Bootstrap classes, I finally cracked the code. It dawned on me that amidst all the Vue-Bootstrap components, I had lost sight of the bigger picture. Below is the row layout I managed to achieve, both visually as shown in the image result and the corresponding code snippet for those who may find it useful:
https://i.sstatic.net/rF3gN.png
<template>
<div class="mt-2 ml-3 rating-row">
<b-icon class="h2" icon="trophy"></b-icon>
<div class="rating-col ml-4 text-left">
<div class="star-row">
<span class="rating-num">3.7</span>
<span class="ml-1">
<b-icon class="ml-1" icon="star-fill"></b-icon>
<b-icon class="ml-1" icon="star-fill"></b-icon>
<b-icon class="ml-1" icon="star-fill"></b-icon>
<b-icon class="ml-1" icon="star-half"></b-icon>
</span>
</div>
<span class="rating-label">average rating</span>
</div>
</div>
</template>
<style scoped>
.rating-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.rating-col {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
line-height: 16px;
}
.star-row {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.rating-num {
font-weight: bold;
font-size: larger;
}
.rating-label {
font-size: large;
}
</style>