Airbnbの模写　レスポンシブ

現在、airbnbのページ模写をしているのですが、alertの所で、widthを狭くすると
コメントアイコンと×ボタンが浮き出てしまいます。
本来は、コメントアイコンと×ボタンの高さを同じに配置して、文字列だけwidthが狭くなると、2列、3列にしたいです。
positionでabsoluteで指定しようかと思ったのですが、そうすると、widthに関係なくなってしまうため、ほかの方法でないかと考えています。よろしくお願いします

該当付近のコードを張っときます。

html
1```<div class="box1">
2        <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissibl p-0" role="alert">
3            <div class="alert-content">
4                <i class="far fa-comment-dots d-inline-block mb-0 "></i>
5                <p class="d-inline-block mb-0">今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。</p>
6                <button type="button" class="close" data-dismiss="alert">
7                   &times;
8                </button>
9            </div>
10        </div>
11    </div>

css
1.alert p {
2	font-size: 0.9rem;
3	margin-bottom: 0;
4}
5.alert-content {
6    padding: 10px 30px 15px;
7}
8.alert-content .close {
9	position: absolute;
10	right: 1px;
11}

行動規範の内容に同意します

回答1件

ベストアンサー

変更点と差分のみ

HTML
1<div class="box1">  
2<div class="alert alert-info text-center mb-0 rounded-0 alert-dismissibl p-0" role="alert">  
3<div class="alert-content">  
4<!--<i class="far fa-comment-dots d-inline-block mb-0 "></i>-->
5<p class="d-inline-block mb-0">今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。</p>  
6<button type="button" class="close" data-dismiss="alert">  
7&times;  
8</button>  
9</div>  
10</div>  
11</div>

CSS
1.alert p {
2position:relative;/*追加*/
3padding-left:00px;/*00はアイコンサイズ＋テキストからのマージン*/
4}
5.alert p::before {
6position:absolute;/*追加*/
7left:0;/*追加*/
8top:00px;/*00はお好みで、縦位置中央の場合はcalcなどでどうぞ*/
9/*その他<i>タグで入れるアイコンを指定します。*/
10}
11.alert-content {
12position:relative;/*追加*/
13}