<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.