セレクトボックスの前にアイコンを表示したい

Question

bootstrap4で下記のような表示をしたいと思っています。

→ セレクトボックス

書いたソースは下記です。

HTML

<div class="form-row">
  <div class="col-12">
    <span class="oi oi-arrow-thick-right label-icon" title="icon name" aria-hidden="true"></span>
    <select id="select2d" class="form-control indent-adjustment">
      <option>TEST</option>
      <option>TEST</option>
      <option>TEST</option>
    </select>
  </div>
</div>

SCSS

.indent-adjustment {
  width: calc(100% - 25px);
}

実際に表示されるものは、アイコンの前で改行されてしまいます。

.form-inlineを使ってしまうとwidthが効かなくなるので実現がなかなかできない状態です。
良い方法は無いでしょうか？

Answer 1

下記とか。

#select2d {
  display: inline-block;
}

Answer 2

.col-12 を display: flex にして、 #select2d に flex-grow: 1 を指定するのがシンプルでよいかと思います