How to position/align a field (which is inside a div) together with other Fields

Question

Greetings to all!

Within my "form-group Row" I am placing Fields with their respective sizes, however, in the middle of them (to be more specific, between the first and the third field) I created a div (div-financial-supplier) that contains another field and that needs to be rendered following the col-Md-6 ratio, but the "div-financial-supplier" seems to be getting in the way. Someone knows how to fix it?

Thank you :)

• How are you getting:

-As it should be:

-HTML/Razor:

<div class="form-group row">

    <div class="col-md-6">
        <label asp-for="PessoaEmpresaId" class="control-label">Empresa</label>
        <select id="sel-pessoa-empresa" asp-for="PessoaEmpresaId" asp-items="Model.Empresas" title="Selecione uma opção" class="form-control" style="position: fixed !important;"><option value=""></option></select>
        <span asp-validation-for="PessoaEmpresaId" class="text-danger"></span>
    </div>

    <div id="div-financeiro-fornecedor">
        <div class="col-md-6">
            <label asp-for="PessoaFornecedorId" class="control-label">Fornecedor</label>
            <select id="sel-financeiro-fornecedor" asp-for="PessoaFornecedorId" asp-items="Model.PessoasFornecedores" title="Selecione uma opção" class="form-control"  style="position: fixed !important;"><option value=""></option></select>
            <span asp-validation-for="PessoaFornecedorId" class="text-danger"></span>
        </div>
    </div>

    <div class="col-md-4">
        <label asp-for="FinanceiroTipo" class="control-label">Tipo de Controle Financeiro</label>
        <select id="sel-financeiro-tipo" asp-for="FinanceiroTipo" asp-items="Model.FinanceirosTipos" title="Selecione uma opção" class="form-control" style="position: fixed !important;"><option value=""></option></select>
        <span asp-validation-for="FinanceiroTipo" class="text-danger"></span>
    </div>
    <div class="col-md-4">
        <label asp-for="NumeroDocumento" class="control-label">Número do Documento</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <i class="icon fa-list-alt" aria-hidden="true"></i>
                </span>
            </div>
            <input id="txt-numero-documento" asp-for="NumeroDocumento" class="form-control text-uppercase" />
        </div>
        <span asp-validation-for="NumeroDocumento" class="text-danger"></span>
    </div>
    <div class="col-md-4">
        <label asp-for="@Model.ValorDocumento" class="control-label">Valor do Documento</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <i class="icon fa-dollar" aria-hidden="true"></i>
                </span>
            </div>
            <input id="txt-valor-documento" asp-for="@Model.ValorDocumento" class="form-control text-uppercase" />
        </div>
        <span asp-validation-for="@Model.ValorDocumento" class="text-danger"></span>
    </div>
</div>

Answer 1

Face the direct daughters of div=row must be the div=col, then this div with ID=div-financeiro-fornecedor actually should be inside the Column, what is breaking your grid, basically just reverse the order here

<div class="col-md-6">
    <div id="div-financeiro-fornecedor">
        ...
    </div>
</div>