Почему мой столбец отображается ниже моей строки, а не справа?
На данный момент у меня есть веб-страница с 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.