Как расположить сообщение проверки браузера при использовании компонента Select2 ⇐ CSS

[Anonymous]

Я пытаюсь заменить стандартный на Select2 в существующей форме.
Логика формы была написана на Vanilla JS, а проверка на стороне клиента была оставлена ​​браузеру.
Проблема заключается в размещении сообщения об ошибке, создаваемого браузером при использовании компонента Select2:

Код: Выделить всё

document.querySelectorAll("[data-is=select2]").forEach(el => {
// the Select2 component only works with JQuery objects
let $jqo = $(el);
$jqo.select2({
width: "auto",
placeholder: el.firstElementChild.textContent
});
// making sure select2 works with the existing handlers
$jqo.on("select2:select", ev => el.dispatchEvent(new Event("change")));
});

Код: Выделить всё

form {
width: 20rem;
}
label {
display: flex;
align-items: center;
column-gap: 1ch;
}
/* making select and Select2 occupy the remaining space */
select, .select2-container {
flex-grow: 1;
}

Код: Выделить всё

Greetings:

Select2 a Greetings

Как вы можете видеть, после нажатия на кнопки появляется сообщение проверки Select2. помещается под вместо .
Как это исправить? Желательно без JQuery.

Подробнее здесь: https://stackoverflow.com/questions/790 ... -component