Почему стили элементов, созданных с помощью jquery и элементов, написанных на html выглядят по разному?

$(function createStructure () {
    n = 0;
    $('.btn.create-structure').on('click', function () {
        type = $(this).attr('data-type');

        typeA = 0;
        typeB = 0;
        typeC = 0;
        typeD = 0;
        typeE = 0;
        typeF = 0;

        n += 1;
        $('.create-structure-buttons .badge').text(n);

        if (type == 'type-1') {
            typeA += 1;
            $('.structure').append($('<div>', {
                class: 'box typeA box-' + typeA,
                append: $('<div>', {
                    class: 'inner-box',
                    append: $('<div>', {
                        class: 'form-group',
                        append: $('<textarea>', {
                            class: 'form-control quest',
                            placeholder: 'Введите вопрос для задания'
                        })
                    })
                })
                .append($('<div>', {
                    class: 'form-group',
                    append: $('<textarea>', {
                        class: 'form-control answer',
                        placeholder: 'Введите ответ на вопрос'
                    })
                }))
                .append($('<div>', {
                    class: 'form-group',
                    append: $('<textarea>', {
                        class: 'form-control answer',
                        placeholder: 'Введите ответ на вопрос'
                    })
                }))
                .append($('<div>', {
                    class: 'form-group',
                    append: $('<textarea>', {
                        class: 'form-control answer',
                        placeholder: 'Введите ответ на вопрос'
                    })
                }))
                .append($('<div>', {
                    class: 'form-group',
                    append: $('<textarea>', {
                        class: 'form-control answer',
                        placeholder: 'Введите ответ на вопрос'
                    })
                }))
                .append($('<button>', {
                    class: 'btn',
                    text: 'Удалить',
                    on:{
                        click: function (event) {
                            $(this).closest('.box').remove();
                            n -= 1;
                            $('.create-structure-buttons .badge').text(n);
                        }
                    }
                }))
            }))
        }

        else if (type == 'type-2') {
            typeB += 1;
            $('.structure').append($('<div>', {
                class: 'box typeB box-' + typeB,
                append: $('<div>', {
                    class: 'inner-box',
                    append: $('<div>', {
                        class: 'form-group',
                        append: $('<textarea>', {
                            class: 'form-control quest',
                            placeholder: 'Введите вопрос для задания'
                        })
                    })
                })
                .append($('<div>', {
                    class: 'form-group',
                    append: $('<textarea>', {
                        class: 'form-control answer',
                        placeholder: 'Введите ответ на вопрос'
                    })
                }))
                .append($('<div>', {
                    class: 'form-group',
                    append: $('<textarea>', {
                        class: 'form-control answer',
                        placeholder: 'Введите ответ на вопрос'
                    })
                }))
                .append($('<div>', {
                    class: 'form-group',
                    append: $('<textarea>', {
                        class: 'form-control answer',
                        placeholder: 'Введите ответ на вопрос'
                    })
                }))
                .append($('<div>', {
                    class: 'form-group',
                    append: $('<textarea>', {
                        class: 'form-control answer',
                        placeholder: 'Введите ответ на вопрос'
                    })
                }))
                .append($('<button>', {
                    class: 'btn',
                    text: 'Удалить',
                    on:{
                        click: function (event) {
                            $(this).closest('.box').remove();
                            n -= 1;
                            $('.create-structure-buttons .badge').text(n);
                        }
                    }
                }))
            }))
        }

        else if (type == 'type-3') {
            typeC += 1;
            $('.structure').append($('<div>', {
                class: 'box typeC box-' + typeC,
                append: $('<div>', {
                    class: 'inner-box',
                    append: $('<div>', {
                        class: 'form-group',
                        append: $('<textarea>', {
                            class: 'form-control quest',
                            placeholder: 'Введите вопрос для задания'
                        })
                    })
                })
                .append($('<div>', {
                    class: 'answers-block',
                    append: $('<div>', {
                        class: 'form-group d-inline-block',
                        append: $('<textarea>', {
                            class: 'form-control answer',
                            placeholder: 'Введите ответ на вопрос'
                        })
                    })
                })
                .append($('<div>', {
                    class: 'form-group d-inline-block',
                    append: $('<textarea>', {
                        class: 'form-control answer',
                        placeholder: 'Введите ответ на вопрос'
                    })
                }))
                .append($('<div>', {
                    class: 'form-group d-inline-block',
                    append: $('<textarea>', {
                        class: 'form-control answer',
                        placeholder: 'Введите ответ на вопрос'
                    })
                }))
                .append($('<div>', {
                    class: 'form-group d-inline-block',
                    append: $('<textarea>', {
                        class: 'form-control answer',
                        placeholder: 'Введите ответ на вопрос'
                    })
                })))
                .append($('<button>', {
                    class: 'btn',
                    text: 'Удалить',
                    on:{
                        click: function (event) {
                            $(this).closest('.box').remove();
                            n -= 1;
                            $('.create-structure-buttons .badge').text(n);
                        }
                    }
                }))
            }))
        }
    })
})

.structure .box {
    margin-top: 40px;
    padding: 55px;
    position: relative;
    border-top: 2px solid rgba(32, 64, 81, .12);
    border-right: 2px dashed rgba(32, 64, 81, .12);
    border-bottom: 2px solid rgba(32, 64, 81, .12);
    border-left: 2px dashed rgba(32, 64, 81, .12);
}

.box textarea {
    border-radius: 0 !important;
    resize: vertical;
    height: 40px;
    min-height: 40px;
    max-height: 150px;
    /*min-height: 38px !important;*/
}

.box span {
    position: absolute;
    left: 10px;
    top: 10px;
}

.box .quest {
    max-width: 500px;
}

.box .answer {
    max-width: 400px;
    min-width: 300px;
}

.box .left-block,
.box .right-block {
    width: 300px;
}


.inner-box .btn {
    position: absolute;
    right: 15px;
    top: 15px;
}

.typeC .quest {
    max-width: 604px;
}

.answers-block {
    max-width: 610px;
}

.answers-block .form-group {
    margin-right: 4px;
    margin-bottom: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create-structure-buttons">
                        <button class="btn create-structure" data-type="type-1">Выборка</button>
                        <button class="btn create-structure" data-type="type-2">Сортировка</button>
                        <button class="btn create-structure" data-type="type-3">Вставка</button>
                        <button class="btn create-structure" data-type="type-4">Соответствие</button>
                        <button class="btn create-structure" data-type="type-5">Истина / Ложь</button>
                        <button class="btn create-structure" data-type="type-6">Свободный вопрос</button>
                        <div class="btn">
                            <span class="badge badge-dark">0</span>
                        </div>
                    </div>
                    <div class="structure">

                        <div class="box typeC box-1">
                            <div class="inner-box">
                                <div class="form-group">
                                    <textarea class="form-control quest" placeholder="Введите вопрос для задания"></textarea>
                                </div>
                                <div class="answers-block">
                                    <div class="form-group d-inline-block">
                                        <textarea class="form-control answer" placeholder="Введите ответ на вопрос"></textarea>
                                    </div>
                                    <div class="form-group d-inline-block">
                                        <textarea class="form-control answer" placeholder="Введите ответ на вопрос"></textarea>
                                    </div>
                                    <div class="form-group d-inline-block">
                                        <textarea class="form-control answer" placeholder="Введите ответ на вопрос"></textarea>
                                    </div>
                                    <div class="form-group d-inline-block">
                                        <textarea class="form-control answer" placeholder="Введите ответ на вопрос"></textarea>
                                    </div>
                                </div>
                                <button class="btn">Удалить</button>
                            </div>
                        </div>

                    </div>