How to align input text next to Edit Profile Picture?

Question

Hi Team

I have a HTML code, but i notice aligning is not good, meaning Chose file is stretch far from left instead of center just like an image and want to align it well. Please assist me on improving this logic below so UI can look good.

<div class="stu-db">
    <div class="container pg-inn d-flex justify-content-center align-items-center flex-column" style="max-width: 600px; padding: 15px;">
        <div class="text-center">
            <!-- Profile Image Section -->
            <img id="profile-preview" 
                 src="<?php echo htmlspecialchars($_SESSION['profile_image'] ?? 'images/user.jpg'). '?' . time(); ?>" 
                 alt="Profile Image" 
                 class="img-fluid rounded-circle mb-3"
                 style="width: 150px; height: 150px;">
            <br><br>

            <!-- Form Section -->
            <form id="saveProfileForm" action="save_image.php" method="post" enctype="multipart/form-data">
                <div class="d-flex align-items-center mb-3" style="gap: 10px;">
                    <label for="profilePicture" class="form-label" style="white-space: nowrap;">Edit Profile Picture:</label>
                    <input type="file" class="form-control file-input" name="profilePicture" id="profilePicture" accept="image/*" required>
                </div>
                <button type="submit" class="btn btn-primary btn-lg mt-3">Save Image</button>
            </form>
        </div>
    </div>
</div>

<style>
.file-input {
    display: inline-block; 
    max-width: 250px; 
    padding: 5px; 
    vertical-align: middle; 
    text-overflow: ellipsis; 
}

.form-label {
    margin-bottom: 0; 
    font-weight: 500; 
    margin-right: 10px; 
    vertical-align: middle; 
    white-space: nowrap; 
}

.custom-file-input-wrapper input[type="file"] {
    width: 100%;
    text-align: right; 
}
</style>