Невозможно получить прозрачное поле и кнопку выбора файла на одной строке с файлом в HTML-форме

Я создал форму, которая показывает пользователям email, имя пользователя и ссылку на их фотографию профиля, но я не могу заставить кнопку выбора файла, кнопку очистки и флажок быть на той же строке формы, что и ссылка, и я не знаю, почему, и я пытался изменить css, но он не позволяет мне изменить или реализовать их на той же строке внутри формы.

Html

{% extends 'parasites_app/base.html' %}
{% load static %}






    {% block content_block %}
    
        <!-- It has to be here to load content from the extending templates -->
    
        <link rel="stylesheet" type="text/css" href="/static/css/editprofile.css" xmlns="http://www.w3.org/1999/html">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    
        <form id="EditProfile" method="POST" action="/edit_profile/" enctype="multipart/form-data">
        
    
            <h2>Edit Profile</h2>
    
            <input type="hidden" name="csrfmiddlewaretoken"
                value="GSiPiZjdV1XpJ6I5tZJfXuHUqGXqFWBalLxoWCKB6DqfzPalNRm6X3uc2QFp5NuY">
                {% csrf_token %}
            <br>
            <table>
                <tbody>
                    <tr>
                        <th><label for="id_email">Email:</label></th>
                        <td><input type="email" name="email" value="hannah.bialic@glasgow.ac.uk" required="" id="id_email">
                        </td>
                    </tr>
                    <tr>
                        <th><label for="id_username">Username:</label></th>
                        <td><input type="text" name="username" value="hannah.bialic" maxlength="150" required=""
                                id="id_username"><br></td>
                    </tr>
    
                    <tr>
                        <th>
                        
                            <label for="id_picture">Current Picture:</label></th>
                        <td>
                            <li>
                                <a href="/media/profile_images/parapic_Kuw8fB7.png">profile_images/parapic_Kuw8fB7.png</a>
                            </li>
                            <span><input type="file" name="picture" accept="image/*" id="id_picture">
                                Clear<input type="checkbox" name="picture-clear" id="picture-clear_id"></span>
                            
                            
                            
                            
                        </td>
                    </tr>
                </tbody>
            </table>
    
    
    
    
            <!-- Make changes button-->
            <div>
                <button type="submit" class="button">Make Changes</button>
            </div>
    
    
    
        </form>
    
    
        <script>$(".helptext").remove();</script>

Css

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
}

h1 {
  text-align: left;
  font-family: "Poppins", sans-serif;
  color: white;
}

h2 {
  text-align: center;
  font-family: "Poppins", sans-serif;
  color: black;
  margin-right: 1px;
}

h4 {
  text-align: left;
  font-family: "Poppins", sans-serif;
  position: relative;

  color: white;
  margin-left: 35px;
}


#EditProfile {
  display: inline-block;
  background-color: white;
  margin-left: 400px;
  width: 40%;
  height: auto;
  margin-top: 50px;
  border: 3px;
  border-style: solid;
  border-color: #0e0d0d;
  padding: 1em;
  border-radius: 25px;
  text-align: center;
}
input[type="file"] {
  

  color: rgba(0, 0, 0, 0);
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 90%;
  padding: 8px;
  margin: 5px 0 22px 0;
  margin-top: 10px;
  margin-right: 90px;
  display: inline-block;
  border-style: solid;
  border-color: #0e0d0d;
  background: #f1f1f1;
  text-align: center;
}

input[type="text"] {
  margin-top: 20px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  background-color: #ddd;
  border-style: solid;
  border-color: #0e0d0d;
}

#id_picture {
  margin-top: -190px;
  
}



input[type="checkbox"]{
    display: inline;
}

li{
  
   margin-top: 30px;
   list-style-type: none;
   margin-right:200px;
}

{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">