У меня есть два div, которые я хочу иметь одинаковый рост.Левый div имеет динамическое содержимое, которое может расширяться по вертикали с любым количеством внутренних div.Правый div имеет один внутренний div, который должен оставаться наверху и оставаться видимым, независимо от того, как далеко вы прокрутите вниз.Пожалуйста, посмотрите на эту кодовую ручку
#shipping_policies {
border: 1px solid #000000;
padding: 5px;
}
#shipping_policies a {
display: block;
font-size: .9em;
text-decoration: underline;
}
.checkout .card-header {
background-color: #f2f2f2 !important;
}
.checkout button {
color: #000;
font-size: 0.6em;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
line-height: 100px;
text-align: center;
}
.square1 p {
color: #FFFFFF;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container mt-5 h-auto">
<div class="" style="">
<div class="col-6 border-danger float-left d-inline-block mr-1" style="background-color: #ffffff;">
<div style="width: 150px;" class="py-2 d-inline">
<div class="float-left">
<img src="https://via.placeholder.com/228x150" alt="" class="mt-2 mb-5" /><br>
<a class="mt-4" style="border-radius: 0; width: 150px; margin-bottom: 10px;" id="del-item" href="#">X REMOVE</a>
</div>
<div class="float-left ml-3 mt-1">
<p class="px-0 mb-0">short_desc</p>
<p class="px-0 mb-0">UOM</p>
<label for="quantity" style="margin-bottom: 0; font-weight: bold; margin-top: 20px;">QTY</label><br>
<input type="text" class="quantity" name="quantity" value="1">
</div>
</div>
<div style="position: absolute; right: 10px; bottom: 1px;">
<p class="mb-0" style="font-weight: bold; font-size: 1.1em; color: #990000;">$399.99</p>
</div>
</div>
<div class="col-6 border-danger float-left d-inline-block mr-1" style="background-color: #ffffff;">
<div style="width: 150px;" class="py-2 d-inline">
<div class="float-left">
<img src="https://via.placeholder.com/228x150" alt="" class="mt-2 mb-5" /><br>
<a class="mt-4" style="border-radius: 0; width: 150px; margin-bottom: 10px;" id="del-item" href="#">X REMOVE</a>
</div>
<div class="float-left ml-3 mt-1">
<p class="px-0 mb-0">short_desc</p>
<p class="px-0 mb-0">UOM</p>
<label for="quantity" style="margin-bottom: 0; font-weight: bold; margin-top: 20px;">QTY</label><br>
<input type="text" class="quantity" name="quantity" value="1">
</div>
</div>
<div style="position: absolute; right: 10px; bottom: 1px;">
<p class="mb-0" style="font-weight: bold; font-size: 1.1em; color: #990000;">$399.99</p>
</div>
</div>
</div>
<div class="" style="">
<div class="col-4 border-danger float-left ml-4" style="background-color: #f2f2f2; border-radius: 4px;">
<div class="w-100 mt-2">
<span>Subtotal</span>
<p class="float-right">$399.99</p>
</div>
<div class="w-100 mt-4">
<h4 style="font-weight: bold; margin-bottom: 0">Estimated Total</h4>
<p class="float-right" style="font-size: large; font-weight: bold;">$399.99</p>
<p class="" style="font-size: smaller">Tax Calculated at Checkout</p>
</div>
<hr style="height: 2px; color: #000; background: #000;" />
<div class="w-100">
<input class="w-100" style="height: 40px;" type="text" id="promo" name="promo" placeholder="Enter Promo Code" />
<button style="position: absolute; right: 8%; bottom: 34%; background-color: #0066CC; color: #FFFFFF;">Apply Now</button>
</div>
<hr style="height: 5px; color: #000; background: #0066CC;" />
<a class="w-100 mb-2 btn" style="background-color: #febd69;" href="http://groves.local/product/checkout">CHECKOUT</a>
</div>
<div class="float-right" style="margin-right: 15%; margin-top: 2%; width: 340px;">
<h5 style="font-weight: bold;">Shipping & Policies</h5>
<div id="shipping_policies">
<a href="#">Shipping</a>
<a href="#">Policies</a>
</div>
</div>
</div>
<div>
Этот фрагмент кода - то, где я до сих пор получал любую помощь, очень признателен.