Bootstrap выровнять по правому краю в строке

Question

Как это:

Как и должно быть:

В настоящее время второйКомпонент сдвигается вправо, но его содержимое выравнивается по левому краю.Я пытался добавить float-right класс, но он не работает.

<div class="container">
  <form class="form-row">
    <div class="col-md-3">
     Some component here
    </div>
    <!--Content of this element should be aligned to right-->
    <div class="col-auto ml-auto">
      <div class="form-inline">
        <label>Some label</label>
        <input class="form-control" readonly>
      </div>
      <div class="form-inline">
        <label>Other longer label</label>
        <input class="form-control" readonly>
      </div>
    </div>
  </form>
</div>

Answer 1

Я добавил style="display: flex; justify-content: flex-end" к следующему элементу <div class="form-inline">, и он работал так, как я хочу.