CSS: Kasus yang Butuh Flex dibanding Grid

Kebutuhan saya adalah membuat icon berada di sebelah kiri dengan ukuran kecil (sesuai ukuran icon tsb). Sedangkan judul materi ada di sebelah kanannya dengan mengambil seluruh ruang yang ada.

Grid Terlalu Kaku
Awalnya saya menggunakan grid namun ternyata tidak sempurna. Saya atur ukuran grid untuk container div icon sebagai div.col-1 , ukuran terkecil di grid bootstrap. Namun ternyata ukuran tersebut masih terlalu besar. Sehingga jarak icon terlalu jauh terhadap judul.

Jarak icon terhadap judul terlalu besar

Flex sebagai Solusi
Lalu saya menggunakan flex dengan hasil sebagai berikut.

Hasil yang diharapkan tercapai dengan Flex.

Berikut adalah source code menggunakan bootstrap.

<div class="d-flex flex-row">
    <div><i class="fas fa-book-open"></i></div>
    <div><!-- Judul materi disini --></div>
</div>