I have a site written in HTML and CSS, and the site contains two languages, the first is Arabic and the second is English, and as it is clear in the picture, there is the following text:
Healthy food, with a variety of meals, you can taste dishes in many countries of the world, and you can change the ingredients of a dish.
The problem is that when the site is in English, the text starts from the left, and when it is nude, it starts from the right. How can I solve this problem?
<div class="col-lg-5 order-2 order-lg-1 d-flex flex-column justify-content-center align-items-center align-items-lg-start text-center text-lg-end">
<h2 data-aos="fade-up" data-i18n="EnjoyYourHealthy">Enjoy Your Healthy<br data-i18n="DeliciousFood">Delicious Food</h2>
<p data-aos="fade-up" data-aos-delay="100" data-i18n="Introduction">
Healthy food, with a variety of meals, you can taste dishes in many countries of the world, and you can change the ingredients of a dish.</p>
<div class="d-flex" data-aos="fade-up" data-aos-delay="200">
<a href="#book-a-table" class="btn-book-a-table" data-i18n="BookATable">Book a Table</a>
<a href="https://www.youtube.com/watch?v=LXb3EKWsInQ" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span data-i18n="WatchVideo" class="pr-3">Watch Video</span></a>
</div>
</div>