Проблема CSS: ширина текстовой области отличается от ширины полей ввода текста ⇐ CSS

[Anonymous]

Я создаю простую форму, состоящую из двух полей ввода текста и одной текстовой области, и хочу, чтобы все было идеально выровнено, все три элемента находились друг под другом. Конечно, я хочу, чтобы они были одинаковой ширины, но что бы я ни делал, текстовая область с правой стороны все равно выглядит немного шире.
Есть идеи?
Вот что У меня есть:

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

form {
display: flex;
flex-direction: column;
max-width: 60%;
}

.form-groep {
display: flex;
flex-direction: row;
}

label {
margin-bottom: 1rem;
width: 20vw;
font-size: 1.3vw;
}

input,
textarea {
padding: 8px;
font-size: 0.8rem;
border: 1px solid #ccc;
border-radius: 6px;
width: 40vw;
margin: 0;
}

textarea {
resize: none;
height: 10vw;
box-sizing: border-box;
}

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

Naam *


E-mailadres *


Bericht *

Я попробовал изменить все возможные параметры, которые только мог придумать, это лучший вариант У меня получилось после многих попыток.

Подробнее здесь: https://stackoverflow.com/questions/793 ... put-fields