我已经制作了一个Django网站，想要显示我的结果，就像在顶部有一个小表单。在左边有一个表格，我想在右边的表格中添加两个图片和另一列。我已经设计了一个图来更好地解释 - 在此输入图像描述

现在我已经编写了表单1和表格的代码。我也会编写后端代码。我想知道如何编写图片和表单2的html代码，因为它们在表格的右侧。只要写任何html代码，它就会出现在表格下面。有人可以帮助在表格的右侧添加图片和表单2吗？

我现在的html代码是-

*{% extends 'login/basic.html' %}
{% block title %}Approval of count{% endblock title %}
{% block body %}

<!-- <div class="container my-5 px-2"> -->
<form action="/approval" method="post">{% csrf_token %}
    <!-- <div class="container" >
            <div class="form-group mx-5 my-3">

                <div class="form-group mx-5 my-3">
                    <label class="my-3" for="date">Date</label>
                    <input type="date" id="date" name="date">
                </div>

                <label class="form-group mx-5 my-3" for="servers">Choose the server from - {{serverLst}}</label>
                <div class="form-group mx-5 my-3">
                    <select name="serverName" id="forserver" size="4" multiple>
                        {% for server in serverLst %}
                        <option value="{{server}}">{{server}}</option>
                        {% endfor %}
                    </select>
                </div>
                <button type="submit" class="btn btn-primary mx-5 my-3">Submit</button>
            </div>

        </div> -->

    <div class="row g-2">
        <div class="col-md">
            <div class="form-floating">
                <input type="date" class="form-control" id="floatingInputGrid" name="date">
                <label for="floatingInputGrid">Shift Date</label>
            </div>
        </div>
        <div class="col-md">
            <div class="form-floating">
                <select name="serverName" class="form-select" id="floatingSelectGrid">
                    <option selected>Server Name</option>
                    {% for server in serverLst %}
                    <option value="{{server}}">{{server}}</option>
                    {% endfor %}
                </select>
                <label for="floatingSelectGrid">Select your server</label>
            </div>
        </div>
        <div class="col-md">
            <div class="form-floating">
                <button type="submit" class="btn btn-primary mx-5 my-2" id="floatingInputGrid">Submit</button>
            </div>
        </div>
    </div>
</form>

<!-- tables  -->

<table class="table" style="width:25%">
    <thead>
        <tr>
            <th scope="col">User name</th>
            <th scope="col">Starting</th>
            <th scope="col">Ending</th>
            <th scope="col">Bonus</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

<!-- </div> -->
{% endblock %}

任何改进我的html代码的建议都将非常有帮助，如果有任何html错误，请忽略。