Как мне поместить поле внутри блока span?

Question

Добрый день!

Есть скрипт для проверки правильности поля, он выдает в поле сообщение об ошибке:

<span class="input__error" id="error-for-phone">Wrong number</span>

var message = field.form.querySelector('.input__error#error-for-' + id);

if (!message) {
    message = document.createElement('span');
    message.className = 'input__error';
    message.id = 'error-for-' + id;

    // If the field is a radio button or checkbox, insert error after the label
    var label;
    if (field.type === 'radio' || field.type === 'checkbox') {
        label = field.form.querySelector('label[for="' + id + '"]') || field.parentNode;
        if (label) {
            label.parentNode.insertBefore(message, label.nextSibling);
        }
    }
    // В противном случае вставьте его после поля
    if (!label) {
        field.parentNode.insertBefore(message, field.nextSibling);
    }
}

В шаблоне есть блок:

<span class="input__text">
     <span class="input__label">Phone number</span> 
     Example: <span class="input__error">Wrong number</span> 
</span>

Подскажите пожалуйста, как заставить поле с ошибкой отображаться внутри блока, как указано в примере?

В данный момент поле отображается поверх требуемого блока.

Спасибо.