how to fix the alignment of the comment’s Text?

I want to put the comment’s text underneath the user image like this layout:

this is the current html:

                                        <div class="custom-box">
                                            <div class="comments-container">
                                                <div
                                                    class="dropdown-container p"
                                                    onclick="toggleDropdown()"
                                                >
                                                    <span class="mt-1"
                                                        >التعليقات</span
                                                    >
                                                    <span class="arrow mt-1"></span>
                                                </div>
                                                <div
                                                    id="dropdownContent"
                                                    class="dropdown-content"
                                                >
                                                    <h3>إضافة تعليق</h3>
                                                    <div
                                                        class="comment-input-container"
                                                    >
                                                        <input
                                                            type="text"
                                                            id="commentText"
                                                            class="comment-input"
                                                        />
                                                    </div>
                                                    <button
                                                        onclick="addComment()"
                                                        class="add-comment-button"
                                                    >
                                                        أضف
                                                    </button>
                                                    <div id="commentsList"></div>
                                                </div>
                                            </div>
                                        </div>

and this is the styling:

.comments-container {
    padding-bottom: 0px !important;

    .dropdown-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        cursor: pointer;
        font-weight: 900;
    }

    .dropdown-container:hover {
        opacity: 0.8;
    }

    .dropdown-container .arrow {
        padding: 15px;
        border-radius: 3px;
        height: 50px;
        color: black;
        padding-right: 30px;
        font-size: 14px;
        position: relative;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        border: none;
        background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>")
            no-repeat;
        background-position: right 5px top 50%;
    }

    .dropdown-content {
        display: none;
        padding: 20px;
        border-radius: 8px;
        margin-top: 10px;
    }

    .dropdown-content.show {
        display: block;
    }

    .comment-card {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        background-color: white;
        padding: 10px;
        border-radius: 15px;
        margin-top: 10px;
        margin-left: 10px;
        border: 1px solid #ddd;
    }

    .comment-card img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-left: 10px;
    }

    .comment-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-left: 10px;
    }

    .comment-header .user-name {
        font-size: 14px;
        font-weight: 900;
        color: #000;
    }

    .comment-header .comment-date {
        font-size: 12px;
        color: #888;
    }

    .comment-text {
        margin-top: 5px;
        font-size: 16px;
        padding-left: 10px;
    }

    .add-comment-button {
        padding: 10px 20px;
        background-color: #0056b3;
        color: white;
        border: none;
        border-radius: 35px;
        width: 150px;
        height: 42px;
        cursor: pointer;
        margin-top: 20px;
        margin-left: 10px;
    }

    .add-comment-button:hover {
        background-color: #004494;
    }

    .comment-input-container {
        display: flex;
        align-items: center;
        margin-top: 10px;
    }

    .comment-input {
        flex-grow: 1;
        border-radius: 10px;
        border: 1px solid #ddd;
        padding: 10px;
        margin-left: 10px;
        height: 60px;
    }
}

and the javascript :

            <script>
document.addEventListener("DOMContentLoaded", function () {
    addDefaultComment(); // Add a default comment when the page loads
    keepDropdownOpen();  // Keep the dropdown open by default
});

function toggleDropdown() {
    const dropdownContent = document.getElementById("dropdownContent");
    dropdownContent.classList.toggle("show");
}

function keepDropdownOpen() {
    const dropdownContent = document.getElementById("dropdownContent");
    dropdownContent.classList.add("show"); // Keep the dropdown open by default
}

function addComment() {
    const commentText = document.getElementById("commentText").value;
    if (commentText.trim() === "") return;

    createCommentElement(commentText, "زائر"); // Replace "زائر" with actual user name if available

    document.getElementById("commentText").value = "";
}

function createCommentElement(commentText, userName) {
    const commentList = document.getElementById("commentsList");
    const newComment = document.createElement("div");
    newComment.classList.add("comment-card");

    const userImage = document.createElement("img");
    userImage.src = "https://via.placeholder.com/40"; // Placeholder image
    newComment.appendChild(userImage);

    const commentContent = document.createElement("div");
    commentContent.classList.add("comment-content");

    const commentHeader = document.createElement("div");
    commentHeader.classList.add("comment-header");

    const userNameElement = document.createElement("span");
    userNameElement.classList.add("user-name");
    userNameElement.innerText = userName;
    commentHeader.appendChild(userNameElement);

    const commentDate = document.createElement("span");
    commentDate.classList.add("comment-date");
    const date = new Date();
    commentDate.innerText = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
    commentHeader.appendChild(commentDate);

    commentContent.appendChild(commentHeader);

    // Add a line break after the comment header
    const lineBreak = document.createElement("br");
    commentContent.appendChild(lineBreak);

    const commentTextElement = document.createElement("div");
    commentTextElement.classList.add("comment-text");
    commentTextElement.innerText = commentText;

    commentContent.appendChild(commentTextElement);
    newComment.appendChild(commentContent);

    commentList.appendChild(newComment);
}


function addDefaultComment() {
    const defaultCommentText = "هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!";
    createCommentElement(defaultCommentText, "زائر"); 
}

document.getElementById("commentText").addEventListener("keypress", function (event) {
    if (event.key === "Enter") {
        event.preventDefault(); // Prevents the default action of the Enter key
        addComment();
    }
});

            </script>

what should I do to get the required output like the image?

the comment’s text should start underneath the user image , my output is showing the comment’s text next to it not underneath it , what is the problem? or what did I miss? please point me to the right approach