アイコン右にテキストが入ったボックスを作っているが、テキストが長いと改行されたときにアイコンの下にテキストが移動してしまう

Question

一番下の図のようなアイコンと文字のボックスを作っています。

<p>タグで囲んでいる文字が画面端まで到達すると、アイコンの下に文字が移動してしまいます。端まで到達したときにアイコンの右側で自動的に改行されるにはどうしたらよいでしょうか？

現在のコードは以下の通りです。

HTML

<div class="balloon">
  <div class="balloon-text-right">
    <figure class="balloon-img-left">
    <img src="https://www.google.com/images/icons/product/android-128.png" alt="no-image"/>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </figure>
  </div>
</div>

CSS

.balloon{
  padding:30px 10px 10px;
  position:relative;
}

.balloon-img-left{
  position:relative;
  margin:0px;
  float:left;
  object-fit:contain;
  z-index:30;
}

.balloon figure img {
  position:relative;
  height:10%;
  z-index:30;
}
.balloon-text-right{
  position:relative;
  width:90%;
  padding:10px;
  border-radius:11px;
  float:left;
  z-index:10;
  border: ridge 3px;
  border-color: gray;
}
.balloon-text-right p{
  position:relative;
  margin:0;
  
  float:right;
}

Answer 1

これでどうでしょ？
https://codepen.io/SE-studying-now/pen/ePRbMB

Comments

[N.Yankee]

ありがとうございます！想定した通りの結果になりました！

Answer 2

.balloon-img-left {
  display: flex;
}

Comments

[N.Yankee]

ありがとうございます！後に回答いただいた方のコードにこのコードを加えることでアイコンの大きさ以上の長さに対応することができました。