كيف أضع صورة بجانب نص في صفحة الويب؟

تكفي HTML وCSS: HTML لإضافة الصورة والنص، وCSS لترتيبهما بجانب بعض. لا حاجة لـ JavaScript.

<div class="media">
  <img src="photo.jpg" alt="Description">
  <p>Text next to the image.</p>
</div>

.media {
  display: flex;
  gap: 16px;
  align-items: center;
}
.media img {
  width: 40%;
}

في صفحة عربية (dir="rtl") يظهر العنصر الأول على اليمين تلقائيًا. ولعكس الترتيب استخدم flex-direction: row-reverse.

على الجوال

@media (max-width: 600px) {
  .media { flex-direction: column; }
}