Font Awesomeとテキストを横並びにしたい

Question

<div class="about">
        <div class="container">
            <div class="d-flex flex-column text-center">
                <!-- d-flex 指定 column縦並べ-->
                <div class="row">
                    <div class="col-12 mx-auto">
                        <div class="balloon1">
                            <h1 class="font-write font-weight-bold mb-0 pt-3 pb-3">
                                質問が出来ずに困った事はありませんか？</h1>
                        </div>
                        <div class="about-LinedUp pt-5 pb-5">
                                <i class="fas fa-check fa-2x color-rd"></i>
                                   <p class="h2">このエラーの意味が分からない</p>
                                
                                <i class="fas fa-check fa-2x color-rd"></i>
                                   <p class="h2">このエラーの意味が分からない</p>
                                
                                <i class="fas fa-check fa-2x color-rd"></i>
                                    <p class="h2">このエラーの意味が分からない</p>    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>``


```CSS
.about {
    background-color: #0FABBC;
}
.balloon1 {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    /* color: #555; */
    /* font-size: 16px; */
    background: #0FABBC;
}
.about-LinedUp {
  background-color: #E4F9FF;
    list-style-position: inside; /* li要素の・を引き寄せる */
    margin: 0 calc(50% - 50vw);
}

fontawasomeとテキストを横並びにしたいのですがうまくいきません。

少しわかりづらいかもしれませんが１枚目のように今は作成しています

iタグの中にテキストを入れれば横並びになりましたがiタグをredに変更しているためテキストもredになりダメでした

2枚目のようにしたく他にもdivタグで囲んだり試行錯誤しましたが思うようにいかず今回このような質問をさせていただきました。
お手数になりますがよろしくお願い致します。

Answer 1

こうしてみてはいかがでしょう。

<p class="h2"><i class="fas fa-check fa-2x color-rd"></i>このエラーの意味が分からない</p>

Comments

[shinpachi]

ありがとうございます！
無事横並びにすることが出来ました！

もう一つ以前から分からない部分があるのですが、2枚目のように頭揃えするにはどのようにすればよろしいでしょうか？

text-alignなど使ったのですが端っこまで行ってしまったりして出来ない状況です。

[shinpachi]

教えていただいたのを参考し他結果を3枚目として添付しています！

[kei344]

それは別の質問です。質問の内容をあとから増やすのはやめましょう。再現できるHTML/CSSを提示して別途質問することをお勧めします。

[shinpachi]

かしこまりました！
ありがとうございます！

しっかりまとめて再度投稿させていただきますので機会あればよろしくお願い致します！