This form is structured similar to Bootstrap:
HTML:
<div class="container">
<div class="row">
<div class="form-group row-group">
<label class="col-6">First name</label>
<input class="col-6" type="text" value=""></input>
</div>
<div class="form-group row-group">
<label class="col-6">Last name</label>
<input class="col-6" type="text" value=""></input>
</div>
</div>
<div class="row">
<div class="form-group row-group">
<label class="col-4">Message</label>
<input class="col-8" type="text" value=""></input>
</div>
</div>
<div class="row">
<div class="form-group row-group">
<label class="col-4">Message</label>
<input class="col-12" type="text" value=""></input>
</div>
<div class="form-group row-group">
<label class="col-4">Message</label>
<input class="col-12" type="text" value=""></input>
</div>
<div class="form-group row-group">
<label class="col-4">Message</label>
<input class="col-12" type="text" value=""></input>
</div>
</div>
<div class="row">
<div class="col-12 row-group">
<button class="btn">Submit</button>
</div>
</div>
</div>
CSS:
.row {
display: flex
}
.row-group {
display: flex;
flex-direction: row !important;
align-items: center;
label {
flex: 0 0 100px;
}
input {
flex: 1;
}
}
.form-group {
flex: 1 0 0;
flex-direction: column;
}
Here is the outcome:
https://i.sstatic.net/msV8A.png
I am looking to extend the inputs in the first and third rows to the end of the container div without stacking horizontally with their neighbors.
I attempted this solution:
.row-group {
input: flex: 1 1 100%;
}
However, no changes occurred.
What would be the correct method to achieve this?