How to align an image to the left side of a div tag.I have a popup which display the signin section, and I wanted to add an image at the left side of the signin section. How can I do that?

html structure:
index.html

  <div id="signInPopup" class="signInPopup">
        <div class="login-image">
            {% load static %}
                <img src="{% static 'images/img.jpg'%}">
            </div>
        <div class="signInPopup-content">
            <button class="close" id="closeSignIn" onclick="closeSignIn()">
                <i class="fa-solid fa-xmark" style="color: #000000;"></i>
            </button>
            <form action="insert" method="POST">
                {% csrf_token %}
                <br><br>
                <label for="username">Username</label><br>
                <input id ="usernameInput" type="username" name="username" id="username" placeholder="Enter Username" required> <br>
    
                <label for="password">Password</label>
                <input id="passwordInput" type="password" name="password" id="password" placeholder="Enter Password" required>
                <button type="submit" name="signin-submit" id="signInbtn">Sign In</button> <br>
            </form>
            <button id="signUpbtn" onclick="openSignUp()">Sign Up</button>
        </div>
    </div>

I want the image to be positioned at the left side of the .signInPopup div, with the signInPopup-content displayed to the right of the image. no matter what CSS styles I apply, the image remains at the left side of the page.

CSS I’m using:
index.css

.login-image img {
    width: 500px;
    height: 650px;
}

.signInPopup,
.signUpPopup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-top: 60px;
}

.signInPopup-content,
.signUpPopup-content {
    background-color: #fefefe;
    text-align: center;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 600px;
    max-width: 600px;
    height: 650px;
    max-height: 650px;
}

.close {
    border: none;
    background: none;
    float: right;
    font-size: 23px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    text-decoration: none;
    cursor: pointer;
}

I have tried display="inline-block" but it is aligning both the image and the popup to the left side of the page.
Can anyone please suggest the correct CSS approach to align the image to the left side of the div while preserving its responsiveness and aspect ratio? Any insights or suggestions would be greatly appreciated. Thank you!