Как отобразить элементы в одном столбце?

Question

Я хочу отобразить некоторые таблицы (я не знаю ни количества таблиц, ни их длины).Эти таблицы состоят всего из 5 столбцов.Таким образом, я хочу отобразить все таблицы в три столбца на экране (см. Скриншоты).Я не знаю, как сделать так, чтобы заголовок был в том же столбце, что и таблица, с которой он связан. Я имею в виду, что заголовок может находиться внизу столбца, а таблица - вверху следующего столбца..

Ссылка на скриншот:

http://zupimages.net/viewer.php?id=19/15/1sm8.png"

HTML:
В процессе

    {% for temp in list_of %}
        <div class="group">
        <div class="title-table round">
            {{temp.pn}}
        </div>

        <table class="table round group">

            <thead>
                <tr class="">
                    <th class="round"></th>
                    <th class="round grey">OF</th>
                    <th class="round grey">Start Date</th>
                    <th class="round grey">End date</th>
                    <th class="round grey">Status</th>
                </tr>
            </thead>

            <tbody>
            {% for temp_of in temp.list_of_pn %}

            <tr class="highlight-black">
                {% if temp_of.complete == 0 %}
                <td class="round"><i class="fas fa-times-circle uncomplete round"></i></td>
                {% endif %}
                {% if temp_of.complete == 1 %}
                <td class="round"><i class="fas fa-check-circle complete round"></i></td>
                {% endif %}
                {% if temp_of.complete == None %}
                <td class="round"></td>
                {% endif %}

                <td class="round cell">
                    <a href = "{% url 'app_rafale:of_overview' pk=temp_of.pk %}" {{temp_of.num_of}}>
                        {{temp_of.num_of}}
                    </a>
                </td>
                <td class="round cell">
                    {{temp_of.start_date |date:'d/m/Y'}}
                </td>
                <td class="round cell">
                    {{temp_of.end_date |date:'d/m/Y'}}
                </td>
                <td class="round cell">
                    {{temp_of.prod_status}}
                </td>

            </tr>

    </div>
            {% endfor %}
            </tbody>
        </table>
    {% endfor %}
                </div>

Вот код:

 .subtitle{
 padding: 5px;
 background-color: rgba(0, 0, 0, .6);
 text-align: center;
 color : #fff;
 margin-right: auto;
 margin-left: auto;
 margin-top : 1%;
 width: auto;
 font-size: 150%;
 border-radius: 10px;
 }

 .global{
 background-color: rgba(187, 210, 225, .8);
 margin : 0.5%;
 padding: 10px;
 }

 .title-table{
 padding : 3px;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.5);
 color: #fff;
 }

 .table{
         padding: 5px;
     width: 100%;
     overflow: hidden;
     box-shadow: 0 0 20px rgba(0,0,0,0.1);
     text-align: center;
     background-color: rgba(0,0,0,0.2);
     color: #fff;
 }


 .row-of{
    background-color: rgba(0,0,0,0.2);

 }

 .group{
     column-span : 1;
 }

 .highlight-black:hover .cell{
 background-color: #111;
 }

 .col-2{
 position: relative;
 margin : 0.5%;
 float: left;
 width: 49%;
 padding: 10px;
 background-color: rgba(187, 210, 225, .8);
 }

Я хочу, чтобы заголовки "VP0680" и "SP0731" находились вверху соответствующих таблиц в следующем столбце.