Почему мой столбец отображается ниже моей строки, а не справа?

На данный момент у меня есть веб-страница с 3 карточками, которые я собираюсь использовать в качестве карточек контактов. Справа от них в отдельной колонке я хочу разместить текст, но по какой-то причине текст всегда появляется непосредственно под карточками, как показано ниже.

Моим желаемым результатом является отображение тестового текста справа от карточек. В настоящее время html отформатирован следующим образом:

{%  extends 'base.html' %}

{% block content %}
<br>

<div class="container">
  <div class = "row-sm-1">
    <div class ="col-sm-1">
      <!-- Card 1 -->
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Person</h5>
          <p class="card-text">Description</p>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Email: </li>
          <li class="list-group-item">Phone: </li>
        </ul>
      </div>
      <br><br>

      
      <!-- Card 2 -->
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Person</h5>
          <p class="card-text">Description</p>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Email: </li>
          <li class="list-group-item">Phone: </li>
        </ul>
      </div>
      <br><br>

      <!-- Card 3 -->
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Person</h5>
          <p class="card-text">Description</p>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Email: </li>
          <li class="list-group-item">Phone: </li>
        </ul>
      </div>
      <br><br>

    </div>

    <!-- Second Column -->
    <div class = "col-sm-2">

      <h1>Test</h1>

    </div>


  </div>
</div>
  

<br><br><br>

{% endblock %}

Где base.html содержит только основные теги, такие как head, body и т.д.

Эта проблема сохраняется независимо от того, как я форматирую столбцы, используя различные классы, такие как col-lg или col-sm.

Вернуться на верх