Неправильная запись текста в поле формы

Здраствуйте, я реализую форму для записи в ней данных, во всех полях данные записываются нормально, кроме последнего поля Краткое описание проблемы*. Это поле больше других и почему-то ввод с клавиатуры там начинается с середины поля по вертикали. Не понимаю почему, помогите разобраться. Код формы

<div class="form-container">
                     <div class="form-group">
                         <label for="name">Имя*</label>
                         <input type="text" id="name" name="name" class="input-field" required>
                         <div id="name-warning" style="color: red;"></div>
                     </div>
                     <div class="form-group">
                         <label for="phone">Телефон*</label>
                         <input type="text" id="phone" name="phone" class="input-field" placeholder="+38 " onfocus="addPrefix(this)">
                         <div id="phone-warning" style="color: red;"></div>
                     </div>
                     <div class="form-group1">
                         <label for="problem">Краткое описание проблемы*</label>
                         <input type="text" id="problem" name="problem" class="input-field1" required>
                         <div id="problem-warning" style="color: red;"></div>
                     </div>
                    
                     <a href="#" class="btn" onclick="validateForm(event)">Отправить</a>
                    
                     <div id="warning-message" style="color: red;"></div>
             </div>

.css

.form-container {
    width: 440px;
    min-height: 550px;
    border-radius: 10px;
    background-color: #e4c9c2;
    padding: 20px;
    margin-top: 45px;

}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}

.input-field {
    width: 400px;
    height: 50px;
    border: 1px solid black;
    margin-top: 10px;
    /* Зменшено відстань від тексту до поля вводу */
    padding: 5px;
    border-radius: 7px;
    background-color: #FFFFFF;
    /* для зручності */
    
}

.input-field1 {
    width: 400px;
    height: 200px;
    border: 1px solid black;
    margin-top: 10px;
    padding: 5px;
    border-radius: 7px;
    background-color: #FFFFFF;

}

.form-group1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 40px;
    
}

.btn {

    padding: 9px 36px;
    border: 1px solid black;
    border-radius: 7px;
    background-color: #FFC600;
    color: black;

    font-size: 20px;
    font-weight: 500;

    transition: opacity 0.2s ease-in;
}

.btn:hover {
    opacity: 0.9;
}

.btn:active {
    position: relative;
    top: 1px;
}

script1.js

function addPrefix(input) {
     if (!input.value.startsWith("+38 ")) {
         input.value = "+38" + input.value;
     }
}

function validateForm() {
     var nameValue = document.getElementById('name').value;
     var phoneValue = document.getElementById('phone').value;
     var problemValue = document.getElementById('problem').value;

     var nameRegex = /^[а-яА-ЯІІІєїґґ']+$/; // Регулярное выражение для кириллицы

     var nameWarning = document.getElementById('name-warning');
     var phoneWarning = document.getElementById('phone-warning');
     var problemWarning = document.getElementById('problem-warning');

     if (nameValue === "") {
         nameWarning.innerText = "Пожалуйста, введите ваше имя!";
     } else if (!nameRegex.test(nameValue)) {
         nameWarning.innerText = "Пожалуйста, введите только кириллицу!";
     } else {
         nameWarning.innerText = "";
     }

     if (!phoneValue.startsWith("+38 ") || !/^\+38 \d{10}$/.test(phoneValue)) {
         phoneWarning.innerText = "Пожалуйста, введите правильный телефонный номер!";
     } else {
         phoneWarning.innerText = "";
     }

     if (problemValue === "") {
         problemWarning.innerText = "Пожалуйста, заполните это поле!";
     } else {
         problemWarning.innerText = "";
     }

     // Проверка, есть ли предупреждение
     var warnings = [nameWarning, phoneWarning, problemWarning];
     var hasWarnings = warnings.some(function (warning) {
         return warning.innerText !== "";
     });

     // Изменение высоты контейнера в зависимости от имеющихся предупреждений
     var formContainer = document.querySelector('.form-container');
     formContainer.style.height = hasWarnings? '650px' : '550px';

     if (!hasWarnings && nameRegex.test(nameValue) && phoneValue.startsWith("+38 ") && /^\+38 \d{10}$/.test(phoneValue) && problemValue !== "") {
         // Все поля заполнены и отвечают требованиям, перенаправление на result.html
         window.location.href="result.html";
     }
}