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:
Advertisement
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>