两个CSS元素彼此相邻

Question

我尝试了几个小时，以将django表单放置在与表格相同的高度上，但是由于我将更多数据添加到表中而导致django表单无法正常工作，所以我想将其粘贴在表格的顶部div这是我的html代码：

<div style="display:inline-block;margin-left:10%;width:30%">
     {% if status == "O" %}
    <form action="{% url 'aktentabelleadd'%}" method="post" style="margin-left:10%;margin-right:5%;border:solid;border-color:white;border-radius: 5px;width:50%">
        {% csrf_token %}
        <h3 style="color:white;text-align:center">Akte hinzufügen</h3>
    <input type="hidden" name="mitglied" value="{{container}}"/>
    <input type="hidden" name="benutzer" value=" {{request.user.username}}"/>
        <input type="hidden" name="status" value="{{status}}" />
    <div style="color:white;margin-left:12%;margin-top:1%;margin-bottom:1%">{{aktenform}} 
        <button class="btn btn-primary" type="submit" value="hinzufügen">hinzufügen</button>
        </div>
    </form>
     {% endif %}
    </div>
<div style="display:inline-block;width:45%">
    <table  id="myTable" style="border-color:white;border-radius:6px">
        <tr style="border:solid;border-color:white;padding-bottom:1%;padding-left:1%;border-radius:6px;color:white">
            <th class="spaltenname" onclick="sortTable(0)">Aktenbarcode</th>
            <th class="spaltenname" onclick="sortTable(1)">Ersteller</th>
            <th class="spaltenname" onclick="sortTable(2)">Startdatum</th>            
            <th class="spaltenname" onclick="sortTable(3)">Kundennummer</th>
            <th class="spaltenname" onclick="sortTable(4)">Aktionen</th>   
        </tr>
        {%for Akte in akte_list reversed %}
        <tr>
            <td class="cell">{{Akte.Aktenbarcode}}</td>
            <td class="cell">{{Akte.user}}</td>
            <td class="cell">{{Akte.Startdatum | date:"d.m.Y" }}</td>
            <td class="cell">{{Akte.kundennr}}</td>
            <td class="cell">
            <form action="{% url 'aktedelete' %}" method="post" name="{{Akte.Aktenbarcode}}">
                   {% csrf_token %}
            <!--<input class="btn btn-primary" type="submit" value="{{Akte.Aktenbarcode}}"/> -->

            {% if status == "O" %}

            <input class="btn btn-primary" data-toggle="modal" data-target=#myModal-{{ forloop.counter }} form="{{Akte.Aktenbarcode}}" type="submit" value="Akte entfernen"/>
                <input type="hidden" name="aktenbarcode" value="{{Akte.Aktenbarcode}}" />
                <input type="hidden" name="mitglied" value="{{container}}"/>
                <input type="hidden" name="benutzer" value="{{request.user.username}}"/>
                <input type="hidden" name="status" value="{{status}}" />
                                <!-- Modal -->
                <div class="modal fade" id="myModal-{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle" style="color:black">Akte: {{Akte.Aktenbarcode}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                 </div>
                <div class="modal-body" style="color:black"> Wollen Sie diese Akte unwiderruflich aus dem Container löschen?</div>
                <div class="modal-footer">
                <button type="submit" class="btn btn-primary" value="Save" onclick="form_submit()">Ja, ich bin mir sicher</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" value="Cancel">Nein</button>

                </div>
                </div>
  </div>
</div>
<!-- ModalEnd-->   

                </form></td>
                {% endif %}
        </tr>
        {% endfor %}

        </table>
    </div>

这是问题的img，我希望akteform与表头的高度相同