Align the second text element based on end of first text element - html

Question

I want to show the English sentence and its RTL language translation like this:
When I try to achieve it using this code:
<section>
<h3>I <span style="color: #42affa;">would</span> like a cup of coffee, please.</h3>
<p style="text-align: right;" class='farsi'>«لطفا یک فنجان قهوه لطف کنید.»</p>
</section>
I get this result:
I think I need to get the end of the English text element and start the position of translation text right there!
Any suggestions would be appreciated...
Note: the English sentence aligned to the center.
UPDATE: using code below:
<section style="display:flex; justify-content: center;">
<div>
<h3 style="text-align:right">
I
<span style="color: #42affa;">
would
</span>
like a cup of coffee, please.
</h3>
<p style="direction:rtl" class="farsi">
«لطفا یک فنجان قهوه لطف کنید.»
</p>
</div>
</section>
I get this:

Answer 1

I would recommend using display:flex with justify-content: center on the section element. Then simply wrap the english and farsi text in a div. Align the english text to the right, and set the direction of the farsi text to rtl.
Something like this should work:
<section style="display:flex; justify-content: center;">
<div>
<h3 style="text-align:right">
I
<span style="color: #42affa;">
would
</span> like a cup of coffee, please.
</h3>
<p style="direction:rtl">
«لطفا یک فنجان قهوه لطف کنید.»
</p>
</div>
</section>

Answer 2

Try the below code, which will work properly.
HTML
<p>
I would like a cup of coffee, please.
<br>
<span lang="fa">«لطفا یک فنجان قهوه لطف کنید.»</span>
</p>
CSS
p {
display: inline-block;
background: #181818;
padding: 20px;
color: #fff;
font-size: 24px;
}
span[lang="fa"] {
direction: rtl;
float: right;
display: inline-block;
}