質問内の添付画像通りを作るためだけだと
html、cssそれぞれから不要な行があったので削除してます。
どうしても必要でしたらもう一度記載してください
いかがでしょうか?
html
1 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
2 <div class="balloon">
3 <div class="balloon-text-right">
4 <figure class="balloon-img-left">
5 <img src="https://www.google.com/images/icons/product/android-128.png" alt="no-image"/>
6 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
7 </figure>
8 </div>
9 </div>
css
1* { /* リセット用cssです */
2 margin:0;
3}
4
5.balloon {
6 padding:30px 10px 10px;
7}
8
9.balloon-img-left {
10 display: flex;
11 width:90%;
12 margin: 0 auto; /* 不要なら削除してください */
13 padding:10px;
14 border: 3px ridge gray;
15 border-radius:11px;
16}
17
18.balloon-img-left img {
19 height:15%; /* もしかしたら「%}ではなく「130px」で指定した方が良いかもしれません */
20 width:130px;
21}
22
23.balloon-text-right p{
24 flex: auto;
25}
26
レスポンシブ対応の場合
css
1@media screen and (max-width: 480px) { /* iPhone 7/6 Plus縦 */
2 .balloon-img-left img {
3 height: ○○px; /* 変更サイズ */
4 width: ○○px; /* 変更サイズ */
5 }
6}
7
8@media screen and (max-width: 320px) { /* iPhone 5/SE/4以下縦 */
9 .balloon-img-left img {
10 height: ○○px; /* 変更サイズ */
11 width: ○○px; /* 変更サイズ */
12 }
13}