[SOLVED] How to make 2 elements the same width?

How to make 2 elements the same width?

First question I ask!

Currently building a page showcasing an extract from a book and its translation side by side using flexbox.

The target language is Arabic.

On the example I'm current working on I cannot seem to be able to make the two box-items of the same width...

It seems that it is the usage of Arabic that breaks the balance. How can I make the second box-item take 50% of the box element ?

I attempted to tweak the width of the box-item to auto, but it seems that make the width of each box vary depending on the number of character there is. I tried width : 100% without any success.

Here is an example with Arabic

Here is an example with Latin alphabet

<body>
     <div class="translation">
     <div class="lang">
       <h3 class="lang-name">Français</h3>
       <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget tellus tempus, eleifend est a, commodo leo. Morbi mattis neque at magna malesuada semper sit amet ut ex. Curabitur facilisis, tortor sit amet vehicula vulputate, risus purus malesuada est, vel laoreet nisi tortor vel dui. Fusce accumsan nisl vel placerat semper. Vivamus id quam vel sapien aliquam semper. Morbi elementum lacinia neque, ullamcorper sodales sem bibendum vel. Vivamus eu volutpat erat.

       <br>Duis et convallis eros, id porta eros. Fusce at finibus nisl. Nulla in dictum neque. Suspendisse sed dui in nibh luctus mollis. Curabitur pharetra dapibus risus nec accumsan. Maecenas tincidunt eget nunc sed pellentesque. Nunc ante arcu, dictum sed odio in, cursus semper est. Cras fermentum, ante vitae aliquet faucibus, odio mi dapibus felis, vel placerat dolor nulla et est.
       </p>
       </div>
     <div class="lang">
       <h3 class="lang-name">Arabe</h3>
       <p class="extract ar">ينتهي السفر في جو ساكن إلى حد ما. لا يتكلم كثيرا الرجلان الجالسان في المقدمة. و الذين في المؤخرة مجتهدون فينكبون على المطالعة أو يلعبون لعبة الإحاجي حسب المناظر التي تتتابع أمام عيونهم. فكان النهار جميلا لكنه يبدأ يمحي قليلا قليلا عند وصولهم إلى مدينة ڤان. و يبقى أقل من ساعة قبل وقوف السيارة أمام منزلهم. سيصلون عند المغيب و هذا طريق جيد لإنهاء النهار بشكل رائع و لإزالة التوترات. 
      <br>
فلما سلكوا الطريق الذي يحاذي ساحل المحيط في المؤخرة ليس هناك ولد واحد فقط بل ولدان مفتونان بالمنظر و يتأثران بهذا المنظر الساحر الذي يرؤونه للمرة الأولى وفي عيونهم وهوج برتقالية تشبه أضواء النفق بشكل مستمر و بشكل أفضل أيضا. بعيدا من نفق يقدم المحيط نفسه لهم. لما ركن پول السيارة جولي تشعر أنها في حلم فتلمح أن الشاطئ قريب في الخلف و قد سمعت هدير الأمواج.
      </p>
      </div>
     </div> </div>
     </article>
</body>```

Solution

Add flex to the .lang selector. This sets flex-grow to 1, which basically keeps the two the same size, and flex-basis to zero, which you can kind of think of as normalizing the initial widths. if flex-basis was auto, you could inherit the width from the child.

It also doesn't have to be the .lang selector really, what matters is that you set that on the two elements that are direct children to the .box element. I used the .lang class because those elements are the two children of .box in your example.

.lang{
    margin: 2em;
    flex: 1 1 0;
}

note this is the equal shorthand to flex: 1 1; as omitting the basis defaults it to 0.

If you don't set this flex on the children elements, its children get the default flex property which is flex: 0 1 auto; In this statement flex grow is zero, which means we let the child's size change depending on its content.