<section>
  <h1>Normal Alignment</h1>

  <div class="dir-example" dir="ltr">
    <h2>Left to Right (LTR)</h2>

    <div class="text-example">
      <h2>Everybody (<em>loves</em>) somebody sometime</h2>
      <p>Everybody falls in (<em>love</em>) somehow</p>
    </div>
  </div>

  <div class="dir-example" dir="rtl">
    <h2>Right to Left (RTL)</h2>

    <div class="text-example">
      <h2>כולם (<em>אוהבים</em>) מישהו מתישהו</h2>
      <p>כולם מתאהבים (<em>אוהבים</em>) איכשהו</p>
    </div>
  </div>
</section>
em {
  letter-spacing: 0.6rem;
}

/* Aesthetic changes */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: clamp(10px, 1.2vw, 16px);
  font-family: arial, sans-serif;
}

body {
  padding: 20px;
}

h1 {
  width: 100%;

  color: #0009;
  font-size: 12px;
  font-weight: 400;
}

h2 {
  font-size: 16px;
}

em {
  background-color: #0ff6;
}

section {
  display: flex;
  flex-flow: row wrap;
  gap: 10px 20px;

  padding: 20px;
  border-radius: 10px;
  border: 1px solid #0005;
}

.dir-example {
  flex: 1 1 400px;

  display: flex;
  flex-flow: column;
  gap: 10px;
}

.text-example {
  flex-grow: 1;

  border-radius: 10px;
  padding: 30px;
  box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.67);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.