выровняйте элементы, используя flexbox

Question

HII У меня есть простой раздел, который отображает список данных справа и слева, я хочу выглядеть следующим образом

вот jsfiddle: https://jsfiddle.net/Mwanitete/ukxavqwn/33/

Вот то, что я имею до сих пор

.main-box{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.data-right-bottom ul li{
margin: 10px;
list-style-type: none;
}
.data-right-bottom  ul li span{
  width: 200px;
  display: flex;
  width: 300px;
}

<div class="main-box">

<div class="data-right-bottom">
                <ul>
                    <li style="display: none;">
                        <span>Total wrapping (tax incl.)</span>
                        <span id="total_wrapping_right" class="total_wrapping_right">0,00 zł</span>
                    </li>
                    <li>
                        <span>Total products (tax incl.)</span>
                        <span id="total_product_right" class="total_product_wt_right">210,00 zł</span>
                    </li>
                    <li>
                        <span>Total shipping (tax incl.)</span>
                        <span class="total_shipping_right">
                
               12,00 zł
                    
               </span>
                    </li>
                    <li class="order-subtotal">
                        <span>Total (tax excl.)</span>
                        <span class="total_price_without_tax_right">182,73 zł</span>
                    </li>
                    <li class="order-discounts" style="display:none">
                        <span>Total discounts</span>
                        <span class="total_discount_right">0,00 zł</span>
                    </li>
                    <li class="order-tax">
                        <span>Total tax</span>
                        <span class="total_tax_right">39,27 zł</span>
                    </li>
                    <li class="order-total">
                        <span>Total</span>
                        <span class="total_price_right">222,00 zł</span>
                    </li>
                </ul>
            </div>

<div class="data-right-bottom">
                <ul>
                    <li style="display: none;">
                        <span>Total wrapping (tax incl.)</span>
                        <span id="total_wrapping_right" class="total_wrapping_right">0,00 zł</span>
                    </li>
                    <li>
                        <span>Total products (tax incl.)</span>
                        <span id="total_product_right" class="total_product_wt_right">210,00 zł</span>
                    </li>
                    <li>
                        <span>Total shipping (tax incl.)</span>
                        <span class="total_shipping_right">
                
               12,00 zł
                    
               </span>
                    </li>
                    <li class="order-subtotal">
                        <span>Total (tax excl.)</span>
                        <span class="total_price_without_tax_right">182,73 zł</span>
                    </li>
                    <li class="order-discounts" style="display:none">
                        <span>Total discounts</span>
                        <span class="total_discount_right">0,00 zł</span>
                    </li>
                    <li class="order-tax">
                        <span>Total tax</span>
                        <span class="total_tax_right">39,27 zł</span>
                    </li>
                    <li class="order-total">
                        <span>Total</span>
                        <span class="total_price_right">222,00 zł</span>
                    </li>
                </ul>
            </div>
            
            </div>

https://i.stack.imgur.com/l5fJ4.png что мне не хватает в моем коде, чтобы получить то, что я хочу? любая помощь будет оценена

Answer 1

Вам нужно добавить display: flex к родительскому элементу того, что вы хотите отобразить как гибкий элемент (в данном случае <li>), а затем добавить свойство flex: 1 0 0 к диапазону.

https://jsfiddle.net/vr1c8tgo/

.data-right-bottom ul li{
    margin: 10px;
    list-style-type: none;
    display:flex;
}
.data-right-bottom  ul li span{
    width: 200px;
    width: 300px;
    flex: 1 0 0;
}