Html – how to fix the alignment of the comment's Text?

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();
  }
});

.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;
}

<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>