Поведение горизонтальной формы редактирования

[dymsonn]

Здравствуйте. Вопрос больше по css наверное, но и к фреймворку имеет отношение. А точнее к свойству ActiveForm layout => 'horizontal'. Не понимаю что происходит при

Код: Выделить всё

<?php $form = ActiveForm::begin(
[
layout => 'horizontal'
]);>

и поле ввода

Код: Выделить всё

<?php Pjax::begin(['id' =>div]);>
<?php $form -> field($model, 'ID')->widget(Select2::className(), [
получение данных...
]);
?>
<div class="mbtn">
кнопка открытия модального окна...
</div>
<?php Pjax::end();?>

Получается обычная структура

Код: Выделить всё

<div id=div>
	<div class=select2></div>
	<div class=mbtn></div>
</div>

Так вот я хочу расположить кнопку слева от поля Select, хотя бы в верхнем правом углу верхнего уровня div, в идеале - по центру по горизонтали справа от этого поля Select.
Казалось, пиши css

Код: Выделить всё

.select2
float: left;

.mbtn
float:right;

Но тогда соседние элементы прилипают и всё плывет. Попробовал другой вариант

Код: Выделить всё

.div
display:table

.select2,
.mbtn
display:inline-block

Тогда при попадании в Select2 длинного длинного значение поле Select'a растягивается за границы экрана. И вот как в таком случае спозиционирвоать два простых div один за другим?

[leonenco]

Из официальной докуметации: https://getbootstrap.com/docs/3.4/css/#forms

Код: Выделить всё

<form class="form-inline"> <--------------------------------
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>