Two CSS Elements next to each other - html

Question

I tried several hours to get a django forms on same height as the table but somehow it doesnt work properly the django forms go further and further down as i add more data to my table but i want it to stick on top of the div here is my html code:
<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">×</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>
and here is the img of the problem, i want the akteforms to be on the same height as the table header