Bootstrap 4 формирует встроенные элементы - выравнивание центров

Как лучше всего выровнять конец одного встроенного элемента формы и начало другого? Во гибких контейнерах значение ширины не может соблюдаться по определению, поэтому я не знаю, как с этим справиться!

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
 <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

  <style>
    .col {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <div class = "row">
    <div class = "col-12">
      <form>
        <div class = "form-inline input-group mb-2">
            <div class = "input-group-prepend">
                <label class = "input-group-text" for = "TypeB">Type B</label>
            </div>
            <select class = "custom-select" id = "TypeB">
                <option value = "Type B">Type B</option>
            </select>

            <div class = "input-group-prepend">
                <label class = "input-group-text" for = "TypeBDetail">Type B detail</label>
            </div>
            <input id = "TypeBDetail" type = "text" class = "form-control" >
        </div>


        <div class = "form-inline input-group mb-2">
            <div class = "input-group-prepend">
                <label class = "input-group-text" for = "Number1">Number1 title is here          </label>
            </div>
            <input id = "Number1" type = "text" class = "form-control" >

            <div class = "input-group-prepend">
                <label class = "input-group-text" for = "number"> number</label>
            </div>
            <input type = "text" id = "number" class = "form-control" >

        </div>

        <div class = "form-inline input-group mb-2">
            <div class = "input-group-prepend">
                <label class = "input-group-text" for = "textarea1">Textarea1</label>
            </div>
            <textarea class = "form-control" id = "textarea1" rows = "4" ></textarea>

            <div class = "input-group-prepend">
                <label class = "input-group-text" for = "textarea2">Text<br/>area2</label>
            </div>
            <textarea class = "form-control" id = "textarea2" rows = "4" ></textarea>
        </div>

      </form>
     </div>
    </div>
</body>

</html>

Что, если вы используете столбцы для лучшей компоновки и дополнительных отступов между входными данными?

— 11.02.2019 02:21

@JakubMuda постарается!

— 11.02.2019 11:13

Я уже отвечал на аналогичный вопрос.

— 11.02.2019 11:53

@Zim, а как бы вы экстраполировали свой ответ на ситуацию, когда у вас есть встроенная форма?

— 11.02.2019 11:58

@JakubMuda не работает.

— 12.02.2019 22:50

forms bootstrap-4

11.02.2019 02:06

JS - События опций формы

В продолжение предыдущей статьи CSS - стили, связанные с вводом формы , в этой статье мы будем использовать JS для взаимодействия с формами, на этот...

CSS - Стили, связанные с вводом формы

Общими стилями ввода для форм являются Input (включая Text, Radio, checkbox), Select и Textarea, из которых Input относительно прост, поэтому в этой...