htmlとcssに関する質問です

display:inline-block;で横向きのcssを作成してたのですがうまく横向きにならず困ってます
教えてください
htmlのコードがこちらです
body>
<figure class="side_image">
<img src="onryouri.jpg" alt="料理">
</figure>
<p class="side"> 料理教室へようこそ </p>
<div class="maruneko">
<img class="maruneko" src="maruneko.jpg" alt="まるい猫">
</div>
<p class="side2"> 丸い猫</p>
ｃｓｓはこちらです
figure.side_image{
display:inline-block;
}
p.side{
display:inline-block;
width:300px;
margin-left: 20px;
vertical-align: top;
font-size: 30px;
}
img.side2{
display:inline-block;

}
p.side2{
display:inline-block;
width: 300px;
margin-left: 20px;


}
maruneko.jpgの横に丸い猫という文章を入れたいのですがどうも上手くいきませんよろしくお願い
します。

No.3 ベストアンサー 回答者： Ogre7077 回答日時： 2022/12/06 16:28

<div class="block指定クラス">

_ <div class="inline指定クラス">画像</div>
_ <div class="inline指定クラス">文章</div>
</div>

または

<div class="flexコンテナで配下を横並び指定クラス">
_ <div>画像</div>
_ <div>文章</div>
</div>

参考)
https://developer.mozilla.org/ja/docs/Web/CSS/CS …

No.2 回答者： t_fumiaki 回答日時： 2022/12/06 12:19

<img class="maruneko" src="maruneko.jpg" alt="まるい猫">

↓
<img src="maruneko.jpg" alt="まるい猫">


cssに
.maruneko{display:inline-block;}

を追加

No.1 回答者： fujillin 回答日時： 2022/12/06 11:38

こんにちは

＞maruneko.jpgの横に丸い猫という文章を入れたいのですが～
「maruneko.jpg」の包含要素のdivはブロック要素です。
ですので、その上下で段落わけ（＝改行）されます。

「丸い猫」のテキスト（＝ｐ要素）はCSSでinline-blockに指定されていますが、marginを含めると幅が320pxと見た目より大きいので、画像の大きさや残されている表示領域によっては、行送りされてレイアウトされるかも知れません。
（ご提示のままなら行頭になっているので、行送りされることはありません）