Два столбца (3 и 9) не совпадают

Question

Это мой файл шаблона из Angular:

<div class="container-fluid">
    <div class="row">
      <div class="col bg-dark text-white">
        <a class="navbar-brand">SPORTS STORE</a>
      </div>
    </div>

    <div class="row text-white">
      <div class="col-3 bg-info p-2">
        {{categories.length}} Categories
      </div>
      <div class="col-9 bg-success p-2">
        {{products.length}} Products
      </div>
    </div>
</div>

Итак, во втором, так что у нас есть одна строка и два столбца из 3 и 9 в этой строке. У меня вопрос, почему они ломаются в две строки?