title: How to align dynamically created items to the right and one below the other in grid layout?
body: <p>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</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
     &lt;div class="col"&gt;
        Hotel Name:
     &lt;/div&gt;
     &lt;div class="col" th:text="*{getName()}"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
     &lt;div class="col"&gt;
        Hotel Category:
     &lt;/div&gt;
     &lt;div class="col float-right"
        th:each="star : ${#numbers.sequence(1, accommodationViewModel.category)}"&gt;
        &lt;i class='bx bxs-star'&gt;&lt;/i&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is what they look like now:
  <a href="https://i.stack.imgur.com/n2VWU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n2VWU.png" alt="enter image description here" /></a></p>
  <p>I tried adding  <code>&lt;div class=&quot;col-md-6&quot;&gt;</code> and the result was this
  <a href="https://i.stack.imgur.com/reUrY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/reUrY.png" alt="enter image description here" /></a></p>
  <p>Edit 1:
  <a href="https://i.stack.imgur.com/WKpNA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WKpNA.png" alt="enter image description here" /></a></p>