Bootstrap Woocommerce checkout columns not aligned - html

Question

I've been trying to align my checkout columns side by side for hours and finally decided to swallow my pride and ask for help, I can imagine it's something pretty simple but I can not find it,
When I visit here, and add anything to cart to see the problem, the columns are not aligned side to side, just underneath each other.
Running with Bootstrap + WordPress + Woocommerce.
SCREENSHOT
https://ibb.co/bK382Z8
CODE:
<div class="">
<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
<?php if ( $checkout->get_checkout_fields() ) : ?>
<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
<div class="row" id="customer_details">
<div class="col-xs-12 col-md-6">
<div class="checkbox-form">
<?php do_action( 'woocommerce_checkout_billing' ); ?>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
</div>
<div class="col-xs-12 col-md-6">
<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
<h3 id="order_review_heading"><?php _e( 'Your order', '99fy' ); ?></h3>
<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
<div id="order_review" class="woocommerce-checkout-review-order">
<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>
<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
</div>
</div>
<?php endif; ?>
</form>

Answer 1

The second column that is going under is not in the row, you can see this in HTML. Add the second column inside the row and it should work.
It's roughly supposed to look like this:
<div class="row" id="customer_details">
<div class="col-xs-12 col-md-6">
<div class="checkbox-form">...</div>
</div>
<div class="col-xs-12 col-md-6">
<h3 id="order_review_heading">Your order</h3>
<div id="order_review" class="woocommerce-checkout-review-order">...</div>
</div>
</div>