stack <div> elements within a "row" class Bootstrap4 - css

Question

I'm trying to find a way to stack an element within a row class.
See JS Fiddle here: https://jsfiddle.net/jLhvmq24/2/
I need small tag "Enter Business Email" to show-up below the input box
<div class="row">
<div class="input-group col-10">
<input type="text" class="form-control" placeholder="email address">
<small class="text-muted">Enter Business Email.</small>
</div>
<div class="col-2">
<button class="btn btn-light">Subscribe</button>
</div>
</div>

Answer 1

Use the outer most parent(row) to flex row(by default it displays row).
Since you need the text to be below the input so add flex-direction:column; to the .input-group class.
fiddle
.row {
display: flex;
}
.input-group {
display: flex;
flex-direction: column;
}
<div class="row">
<div class="input-group col-10 mb-4">
<input type="text" class="form-control" placeholder="email address">
<small class="text-muted">Enter Business Email.</small>
</div>
<div class="col-2">
<button class="btn btn-light" type="button">Subscribe</button>
</div>
</div>

Answer 2

You could also use grids to solve it.
CSS
.container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"input"
"small";
}
.input-1 {
grid-area: input;
}
.small-1 {
grid-area: small;
}
HTML
<div class="row">
<div class="input-group col-10 container">
<input type="text" class="form-control input-1" placeholder="email address">
<small class="text-muted small-1">Enter Business Email.</small>
</div>
<div class="col-2">
<button class="btn btn-light">Subscribe</button>
</div>
</div>
You can remove the padding overwriting it from the Bootstrap cols classes