Bootstrap 4 Forms With 2 Columns (Dynamic) - html

Question

I have a user registration form (Bootstrap 4 - in Razor Template)
I will hide some part of form depends on user fillings. My registration form has 2 step. Here is second step.
If user selects a country that hasn't states. I will hide states.
Here is the problem.
If I write code like in here when i hide states that part will be missing.
I wrote code like below using float-left. If I hide any part the other parts moves and fill the missing part.
<div class="container py-5 bg-warning">
<div class="row">
<div id="register" class="col-md-10 mx-auto">
<form asp-action="Create" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
#if (#Model.StateList != null)
{
<div class="form-group col-sm-6 float-left">
<label asp-for="State"></label>
#Html.DropDownListFor(m => m.StateList, #Model.StateList, "- Please Select -",
new {#class = "form-control"})
<span asp-validation-for="State" class="text-danger fixed-span"></span>
</div>
}
<div class="form-group col-sm-6 float-left">
<label asp-for="City"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Phone"></label>
<input asp-for="Phone" class="form-control" />
<span asp-validation-for="Phone" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Company"></label>
<input asp-for="Company" class="form-control" />
<span asp-validation-for="Company" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="TaxId"></label>
<input asp-for="TaxId" class="form-control" />
<span asp-validation-for="TaxId" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Gender"></label>
#Html.DropDownListFor(m => m.Gender, #Model.GenderList, "- Please Select -",
new {#class = "form-control"})
<span asp-validation-for="Gender" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="ConfirmPassword"></label>
<input asp-for="ConfirmPassword" class="form-control" />
<span asp-validation-for="ConfirmPassword" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="AboutJob"></label>
<input asp-for="AboutJob" class="form-control" />
<span asp-validation-for="AboutJob" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="PostCode"></label>
<input asp-for="PostCode" class="form-control" />
<span asp-validation-for="PostCode" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Town"></label>
<input asp-for="Town" class="form-control" />
<span asp-validation-for="Town" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Address"></label>
<input asp-for="Address" class="form-control" />
<span asp-validation-for="Address" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Celluar"></label>
<input asp-for="Celluar" class="form-control" />
<span asp-validation-for="Celluar" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="TaxOffice"></label>
<input asp-for="TaxOffice" class="form-control" />
<span asp-validation-for="TaxOffice" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="TaxAddress"></label>
<input asp-for="TaxAddress" class="form-control" />
<span asp-validation-for="TaxAddress" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="FullName"></label>
<input asp-for="FullName" class="form-control" />
<span asp-validation-for="FullName" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Birthday"></label>
<input asp-for="Birthday" class="form-control" />
<span asp-validation-for="Birthday" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="CitizenId"></label>
<input asp-for="CitizenId" class="form-control" />
<span asp-validation-for="CitizenId" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Website"></label>
<input asp-for="Website" class="form-control" />
<span asp-validation-for="Website" class="text-danger fixed-span"></span>
</div>
<button type="submit" class="btn btn-primary px-4 float-right">Kayıt Ol</button>
</form>
</div>
</div>
As you know there is a span element for error messages under inputs. If I had an error this form looks bad. Do you have any idea to fix this attached in picture

Answer 1

Simple css trick solved my problem.
<style>
.form-group {
height: 80px !important;
}
</style>

Answer 2

Remove float-left class and add parent row class -
<div class="row">
#if (#Model.StateList != null)
{
<div class="form-group col-sm-6">
<label asp-for="State"></label>
#Html.DropDownListFor(m => m.StateList, #Model.StateList, "- Please Select -",
new {#class = "form-control"})
<span asp-validation-for="State" class="text-danger fixed-span"></span>
</div>
}
<div class="form-group col-sm-6">
<label asp-for="City"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Phone"></label>
<input asp-for="Phone" class="form-control" />
<span asp-validation-for="Phone" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Company"></label>
<input asp-for="Company" class="form-control" />
<span asp-validation-for="Company" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="TaxId"></label>
<input asp-for="TaxId" class="form-control" />
<span asp-validation-for="TaxId" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Gender"></label>
#Html.DropDownListFor(m => m.Gender, #Model.GenderList, "- Please Select -",
new {#class = "form-control"})
<span asp-validation-for="Gender" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="ConfirmPassword"></label>
<input asp-for="ConfirmPassword" class="form-control" />
<span asp-validation-for="ConfirmPassword" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="AboutJob"></label>
<input asp-for="AboutJob" class="form-control" />
<span asp-validation-for="AboutJob" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="PostCode"></label>
<input asp-for="PostCode" class="form-control" />
<span asp-validation-for="PostCode" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Town"></label>
<input asp-for="Town" class="form-control" />
<span asp-validation-for="Town" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Address"></label>
<input asp-for="Address" class="form-control" />
<span asp-validation-for="Address" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Celluar"></label>
<input asp-for="Celluar" class="form-control" />
<span asp-validation-for="Celluar" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="TaxOffice"></label>
<input asp-for="TaxOffice" class="form-control" />
<span asp-validation-for="TaxOffice" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="TaxAddress"></label>
<input asp-for="TaxAddress" class="form-control" />
<span asp-validation-for="TaxAddress" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="FullName"></label>
<input asp-for="FullName" class="form-control" />
<span asp-validation-for="FullName" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Birthday"></label>
<input asp-for="Birthday" class="form-control" />
<span asp-validation-for="Birthday" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="CitizenId"></label>
<input asp-for="CitizenId" class="form-control" />
<span asp-validation-for="CitizenId" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Website"></label>
<input asp-for="Website" class="form-control" />
<span asp-validation-for="Website" class="text-danger fixed-span"></span>
</div>
</div>