How to align dynamically created items to the right and one below the other in grid layout?

Question

I have this section which receives data dynamically. I want the stars to appear under the hotel name and to look more compact with less space between them and I am not sure how to achieve this

<div class="row">
   <div class="col">
      Hotel Name:
   </div>
   <div class="col" th:text="*{getName()}"></div>
</div>
<div class="row">
   <div class="col">
      Hotel Category:
   </div>
   <div class="col float-right"
      th:each="star : ${#numbers.sequence(1, accommodationViewModel.category)}">
      <i class='bx bxs-star'></i>
   </div>
</div>

This is what they look like now:

I tried adding <div class="col-md-6"> and the result was this

Edit 1:

Answer 1

The solution that worked for my problem is:

.col-1 {
flex: 0;
padding: 0;
margin-left: 2%;
}