Выровняйте текстовую область рядом с флажком css bootstrap

Question

Мне нужно выровнять текстовую область рядом с флажком.

Мой HTML-код начальной загрузки:

                    <div class="form-group row">
                        <div class="col-12 form-check">
                            <label class="col-3 col-form-label" for="check15">Filter "na" results</label>
                            <input id="check15" class="box15" type="checkbox">
                            <textarea class="col-3 form-control form-control-sm" rows="5" id="filter_na_results"></textarea>
                        </div>
                    </div>

По какой-то причине текстовое поле появляется ПОД строкой с меткой и флажком.Как сделать так, чтобы текстовое поле отображалось справа от флажка в той же строке с флажком?

Здесь также JSFiddle .

Answer 1

Удалите класс управления формой, а также удалите div с flex и измените его на row.И добавьте align-items-start в строке div, чтобы выровнять их по верху текстовой области.

Добавьте класс p-0 на метке

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="form-group row">
  <div class="col-12 form-check">
    <div class="row align-items-start">
      <label class="col-3 col-form-label p-0" for="check15">Filter "na" results</label>
      <input id="check15" class="box15" type="checkbox">
      <textarea class="col-3 form-control-sm offset-3" rows="5" id="filter_na_results"></textarea>
    </div>
  </div>
</div>
</div>

Answer 2

.flex {
  display:flex;
  align-items:center;
}

textarea {
  height:50px;
  width:100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="form-group row">
                            <div class="col-12 form-check">
                            <div class="flex">
                                <label class="col-3 col-form-label" for="check15">Filter "na" results</label>
                                <input id="check15" class="box15" type="checkbox">
                                <textarea class="col-3 form-control form-control-sm offset-3" rows="5" id="filter_na_results"></textarea>
                            </div>
                        </div>
                        </div>