Skip to content
Advertisement

position the translation of the English sentence on the right edge

I have an English sentence and its translation to an RTL sentence right below it:

<div class="sample-sentence">
   <p class="eng">I could make up a bed for you on the sofa.</p>
   <p class="rtl">برات آماده کنم</p>
</div>

So far I can position the RTL sentence only at the very left or center of the English one.

How can I position RTL sentence at the right edge of the English sentence like this:

enter image description here

Answer

grid and justify-content might help:

.sample-sentence {
  display: grid;
  justify-content: start;
}

/* snippet demo purpose */
body>p {text-align:center;background:none;}
p {margin:0;background:#bee}
<div class="sample-sentence">
  <p class="eng">I could make up a bed for you on the sofa.</p>
  <p dir="rtl">برات آماده کنم</p>
</div>
<hr>
<p>no matter the initial direction of the doc</p>
<hr>
<div dir="rtl" >
<div class="sample-sentence">
  <p>برات آماده کنم</p>
  <p dir="ltr" class="eng">I could make up a bed for you on the sofa.</p>
</div>
</div>
Advertisement