Css 如何水平对齐两个DIV

我有这段代码，我想将变体选项与右侧的woo价格区域对齐：

        <div class="woo-button-area">

            <div class="variations variation-price-wrap">
                <div class="variation-options">
                    <select id="opt" class="" name="attribute_pa_opt" data-attribute_name="attribute_pa_opt"
                            data-show_option_none="no">
                        <option value="opt1" class="attached enabled">Option 1</option>
                        <option value="op2" class="attached enabled">Option 2</option>
                    </select></div>
                <div class="woo-price-area">
                    <p class="price">
                        <del><span class="woocommerce-Price-amount amount"><span
                                        class="woocommerce-Price-currencySymbol">£</span>9.00</span></del>
                        <ins><span class="woocommerce-Price-amount amount"><span
                                        class="woocommerce-Price-currencySymbol">£</span>5.00</span></ins>
                    </p>
                    <div class="wc-availability"></div>
                </div>
            </div>


            <div class="single_variation_wrap">
                <div class="woocommerce-variation single_variation" style="">
                    <div class="font80">
                        <a rel="nofollow" href="#details" class="csspopuptrigger" data-popup="details">Details</a>
                    </div>
                    <div class="prosconswidget">
                        <div class="wpsm_pros mt20 font80">
                            <ul>
                                <li>Test li</li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>

选择1
选择2

£9.00
£5.00


测试李

我尝试过浮动，但是详细信息链接超出了价格范围

---

这是页面url:

您可以针对它们的包装类

.variations.variationprice wrap{display:flex；}

.variations.variationprice wrap{display:flex；
对齐内容：间隔；}
p、 价格{
显示器：flex；
弯曲方向：立柱；
保证金：0；
}

选择1
选择2

£9.00
£5.00


测试李

显示实际页面。我会给你正确的代码。@Mordangel如果这是你想要的，请不要忘记接受答案。你可以尝试添加行高：12px或16px，也许它会解决问题。你应该重新发布你删除的问题，因为我可以回答它，如果你喜欢：对齐，但价格不合适，另外，实际价格9应该在5以下，所有浮动都在右边。请检查更新，告诉我这是否是您想要的。选择选项不应该在左边，价格应该在右边。我如何才能获得css？我看到运行代码片段，但是css代码在哪里？它在html之前，这是您想要的吗？