How to stick the second upload file button on the same place?

I have two upload buttons. But the second upload button jumps down after submit.

So I have this html:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Create a Profile</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="{% static 'main/css/custom-style.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'main/css/bootstrap.css' %}" />
    </head>

    <body>
        <div class="container center">
            <span class="form-inline" role="form">
                <div class="inline-div">
                    <form class="form-inline" action="controlepunt140" method="POST" enctype="multipart/form-data">

                        <div class="d-grid gap-3">
                            <div class="form-group">
                                {% csrf_token %}
                                {{ pdf_form.as_p }}


                            </div>
                            <div class="form-outline">
                                <div class="form-group">
                                    <div class="wishlist">
                                        <table class="paddingBetweenRows">
                                            <tr>
                                                <th>fruit aantal </th>
                                                <th>&nbsp;&nbsp;&nbsp;fruit naam</th>
                                                <th>fruit kosten</th>
                                                <th>fruit totaal soort</th>
                                                <th>fruit totaal kosten</th>


                                            </tr>

                                            {% for value0, value1, value2, value3, value4 in content %}
                                            <tr>
                                                <td>{{ value0 }}</td>
                                                <td>{{ value1 }}</td>
                                                <td>{{ value2 }}</td>
                                                <td>{{ value3 }}</td>
                                                <td>
                                                    <span {% if value4 in diff_set %} style="color: red;" {% endif %}>
                                                        {{value4}}</span>
                                                </td>
            </span>
                                            </tr>

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



        <span class="form-inline" role="form">
            <div class="inline-div">
                <form class="form-inline" action="controlepunt140" method="POST" enctype="multipart/form-data">

                    <div class="d-grid gap-3">
                        <div class="form-group">
                            {% csrf_token %}
                            {{ excel_form.as_p }}


                        </div>
                        <div class="form-outline">
                            <div class="form-group">
                                <div class="wishlist">
                                    <table class="paddingBetweenRows">
                                        <tr>
                                            <th>fruit kosten totaal </th>

                                        </tr>
                                        {% for value0 in content_excel %}
                                        <tr>
                                            <td>
                                                <span {% if value0 in diff_set %} style="color: red;" {% endif %}>
                                                    {{value0}}
                                                </span>
                                            </td>

        </span>


        </tr>
        {% endfor %}
        </table>
        </div>
        </div>
        </div>
        </div>
        </div>
        </span>



        <span class="form-inline" role="form">
            <div class="inline-div">
                <div class="d-grid gap-3">
                    <div class="form-group">

                        </br></br></br></br></br></br></br></br></br>

                        <button type="submit" name="form_pdf" class="btn btn-warning">Upload!</button>
                    </div>
                </div>
            </div>
        </span>
        </form>
        </div>
    </body>

</html>

enter image description here

enter image description here

Quesiton: how to keep the second file upload button and the content on the same height as the first file upload button and also on the same height as the first content?

Back to Top