Template Misaligned Bootswatch Template

Question

I started using the Yeti template of bootswatch and there were 3 problems, my textarea misaligned from my other fields, besides the spaces between the fields increase a lot.

Screen print in the image below:

https://prnt.sc/ii8l0b

The sizes of dropdown fields receiving data via ajax have reduced, when using only bootstrap was not occurring these problems.

Css and Html:

.hide-span {
    display:none;
} 
.show-span {
    display:block;
} 

.fail {
    color:red;
}

.icon-success {
    color:green;
}

.icon-error {
    color:green;
}

.margim-element {
    margin:20px;
    
}

.space {
    padding :3px;
}

<div class="form-group">
    
    <div class="row">
        <div class="col-xs-3 space" id="div-id">
            @Html.LabelFor(m => m.TicketId, "Ticket ID")
            @Html.TextBoxFor(m => m.TicketId, new { @class = "form-control ", @readonly = "readonly", id = "ticketId" })
            @Html.ValidationMessageFor(m => m.TicketId, "", new { @class = "text-danger" })
            <label id="message-id"></label>
        </div>
        <div class="col-xs-3 space" id="div-tickettype">
            @Html.LabelFor(m => m.TicketTypeId, "Type")
            @Html.DropDownList("TicketTypeId", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.TicketTypeId, "", new { @class = "text-danger" })
            <label id="message-tickettype"></label>
        </div>


        <div class="col-xs-3 space" id="div-priority">
            @Html.LabelFor(m => m.PriorityId, "Priority")
            @Html.DropDownList("PriorityId", null, htmlAttributes: new { @class = "form-control has-feedback", aria_describedby = "inputSuccess2Status" })
            @Html.ValidationMessageFor(m => m.PriorityId, "", new { @class = "text-danger" })
            <label id="message-priority"></label>

        </div>

    </div>
        
</div>



<div class="form-group">
    <div class="row">
        <div class="col-xs-3 space" id="div-product">
            @Html.LabelFor(m => m.ProductId, "Product")
            @Html.DropDownList("ProductId", null, htmlAttributes: new { @class = "form-control", required = "required" })
            @Html.ValidationMessageFor(m => m.ProductId, "", new { @class = "text-danger" })
            <label id="message-product"></label>
        </div>


        <div class="col-xs-3 space" id="div-subproduct">
            @Html.LabelFor(m => m.SubProductId, "Sub Product")
            @Html.DropDownList("SubProductId", null, htmlAttributes: new { @class = "form-control", required = "required" })
            @Html.ValidationMessageFor(m => m.SubProductId, "", new { @class = "text-danger" })
            <label id="message-subproduct"></label>
        </div>

        <div class="col-xs-3 space" id="div-task">
            @Html.LabelFor(m => m.TaskId, "Task")
            @Html.DropDownList("TaskId", null, htmlAttributes: new { @class = "form-control", required = "required" })
            @Html.ValidationMessageFor(m => m.TaskId, "", new { @class = "text-danger" })
            <label id="message-task"></label>
        </div>

    </div>
</div>


<div class="form-group">
    <div class="row">
        <div class="col-xs-3 space" id="div-version">
            @Html.LabelFor(m => m.VersionId, "Version")
            @Html.DropDownList("VersionId", null, htmlAttributes: new { @class = "form-control", required = "required" })
            @Html.ValidationMessageFor(m => m.VersionId, "", new { @class = "text-danger" })
            <label id="message-version"></label>
        </div>

        @RenderSection("Status", false)
        @RenderSection("SlaExpire", false)
    </div>
</div>

<div class="form-group">
    <div class="row">
        

        @RenderSection("Designated", false) 
        @RenderSection("IdExternal", false)
        
    </div>
</div>


<div class="form-group" id="div-title">
    @Html.LabelFor(m => m.Title, "Title")
    @Html.TextBoxFor(m => m.Title, new { @class = "form-control col-md-12", id = "field-title" })
    @Html.ValidationMessageFor(m => m.Title, "", new { @class = "fail" })
    <label id="message-title"></label>
</div>


<div class="form-group" id="div-description">
    @RenderSection("DescriptionLabel", false)
    <textarea class="form-control form-control-sm" name="description" , id="field-description" rows="8"></textarea>
    <label id="message-description"></label>
</div>

<div class="form-group">
    @Html.LabelFor(m => m.Files, "File Input")
    <br />
    @Html.TextBoxFor(m => m.Files, null, new { type = "file", @class = "input-file" })

</div>