Есть куча проблем с логи c.
Ваши кнопки находятся внутри элемента div с классом col-12, что означает ширину 100%. (bootstrap класс). Решение: используйте col-8 на кнопках и col-4 на изображениях. Или другие классы, которые при добавлении равны 12. (10 + 2, 9 + 3, 8 + 4 и т. Д.)
Затем вы используете flex-direction: column на payment-row. Вам нужно установить row или оставить пустым, потому что строка по умолчанию.
Вам также нужно немного подправить css.
Также. Не используйте float для макета. Особенно, когда вы уже используете bootstrap, который использует flexbox. И используйте классы Boostrap, такие как row для строк и .container и т. Д.
Подробнее о bootstrap Grid System здесь -> bs grid
Подробнее о flexbox -> flexbox MDN
.right-column {
background-color:#f6f7f9;
border: solid 1px lightblue;
height:1078px;
padding:15px;
}
.row-heading {
text-align:center;
padding:0;
}
.payment-img {
width:84px;
height:100%;
padding:0 0 0 15px;
}
.paypal-payment {
width:150px;
height:45px;
}
.cash-payment {
}
.payment-rows {
display: flex;
flex-wrap:wrap;
justify-content: space-between;
}
.payment-form {
padding:0;
}
.payment-method-checkbox {
padding:50px 0 0 0;
font-size:15px;
}
.payment-method {
border:1px solid white;
background-color:#4ab847;
color:white;
height:35px;
width:100%;
font-size:12px;
font-weight:bold;
text-align:center;
}
.payment-method:hover, .payment-method:focus, .payment-method:active {
color: #4DB748;
background-color: #ffffff;
border-color: #4DB748;
}
.terms-conditions {
color:dodgerblue;
}
.right-column {
height:501px;
}
.row-heading {
font-size:22px;
}
.reservation_summary, .total_costs {
font-size:22px;
}
.div-btn-paypal, .div-btn-cash, .div-btn-visa {
padding:0;
}
.visa-payment {
padding:0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 right-column" style="float:right;">
<h2 class="row-heading">Please Select a Payment Method to Pay for your Reservation</h2>
<div class="payment-form ">
<form class="payment-form-start" action="/action_page.php">
<div class="payment-rows">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-3 div-btn-paypal">
<input type="button" class="payment-method" value="PayPal">
<br>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<img class="payment-img paypal-payment" src="https://www.pastepic.xyz/images/2020/03/03/pay_pal65b5eab2fcbb7421.png">
</div>
<br>
</div>
<div class="payment-rows">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-cash">
<input type="button" class="payment-method" value="Cash">
<br>
</div>
<div>
<img class="payment-img cash-payment" src="https://www.pastepic.xyz/images/2020/03/03/cash3e374265160bbca9.png">
</div>
</div>
<br>
<div class="payment-rows">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-visa">
<input type="button" class="payment-method" value="MasterCard/Visa">
<br>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 visa-payment">
<img class="payment-img" src="/images/base/maestro.png">
<img class="payment-img" src="/images/base/mastercard.png">
<img class="payment-img" src="/images/base/visa.png">
</div>
</div>
<br>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 payment-method-checkbox">
<input type="checkbox" class="payment-method-checkbox" required="">
<span>I have read, and I agree to the <a href="https://www.amitours.rent/terms-and-conditions" class="terms-conditions" target="_blank">Terms & Conditions</a></span>
</div>
</form>
</div>
</div>