<div class="container">
  <p>In the following example, the space between the image and the text is set using a logical margin property <code>margin-inline-end</code>. We don't need to set the left nor the right margin for each case, the rule will work for both according to the direction of the block.</p>
  <div class="block-container block-container--en">
    <p><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Circle-icons-image.svg" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas nisl ac placerat finibus. Nunc accumsan arcu leo, mollis rhoncus mi lacinia sollicitudin. Sed vestibulum convallis aliquet. Aenean pellentesque placerat massa, eget bibendum ligula dictum in.</p>
  </div>

  <div class="block-container block-container--ar">
    <p><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Circle-icons-image.svg" alt=""> لوريم إيبسوم(Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه</p>
  </div>
</div>
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.block-container {
  border: 1px solid #ccc;
  padding: 15px;
  margin: 10px 0;
}

.block-container--en {
  direction: ltr;
}

.block-container--ar {
  direction: rtl;
}

img {
  width: 100px;
  margin-inline-end: 15px;
}

.block-container--en img {
  float: left;
}

.block-container--ar img {
  float: right;
}

code {
  background: #eee;
  padding: 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.