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>
