stack <div>элементов в «строке» класса Bootstrap4

Question

Я пытаюсь найти способ сложить элемент внутри класса строки.

См. JS Fiddle здесь: https://jsfiddle.net/jLhvmq24/2/

Мне нужен небольшой тег «Enter Business Email», чтобы отображался под полем ввода

<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

1. Используйте самый внешний родительский (row) для flex row (по умолчанию он отображает строку).
2. Поскольку вам нужно, чтобы текст был ниже input, поэтому добавьте flex-direction:column; в класс .input-group.

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

Вы также можете использовать сетки для его решения.

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>

Вы можете удалить отступы, перезаписав их из классов Bootstrap cols