It seems that the issue lies in your first column having an additional form-row on it, resulting in a row within another row. It's crucial to avoid nesting rows inside rows; instead, utilize columns within rows. These nested rows introduce extra padding (15px for row and 5px for form-row), which can disrupt the percentage-based widths and offsets when used together.
To resolve this, consider taking your second label + div out of its current form-row and placing it inside the form-row associated with the first label + div. Ensure you adjust the col-md counts for both label+div combinations accordingly. I've assigned them as 2 and 3 respectively, totaling 10 ((2 + 3) + (2 + 3)), matching the total width of your second row (2 + 8).
You can view the updated layout in action through this fiddle: here. Additionally, maximize the snippet below to see the changes:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset>
<div class="form-row">
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-3 col-sm-12">
<input type="text" class="form-control">
</div>
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-3 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
<div class="form-row mt-2">
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-8 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
</fieldset>
</form>
I hope this resolves your issue! :)
CSS Only Alternative:
In cases where modifying the DOM is not feasible, CSS can offer a solution. Check out this example implemented using CSS only: CSS Solution:
.form-row.mt-2 {
width: 100%;
}
@media screen and (min-width: 768px) {
.form-row.mt-2>div {
padding-left: 4px;
padding-right: 13px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<form>
<fieldset>
<div class="form-row">
<div class="form-row col-md-6 col-sm-12">
<label class="col-form-label col-md-4 col-sm-12">LABEL</label>
<div class="col-md-4 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
<div class="form-row col-md-6 col-sm-12">
<label class="col-form-label col-md-4 col-sm-12">LABEL</label>
<div class="col-md-4 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-row mt-2">
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-8 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
</fieldset>
</form>
While the CSS-only approach is viable, adjusting the DOM structure remains the preferred solution. :)