I am seeking assistance with making two divs of equal height on my website. The left div contains dynamic content that may expand vertically with various inner divs. Meanwhile, the right div has a single inner div that should remain visible at the top even when scrolling. Please refer to the following code snippet for context:
#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="">
<!-- rest of the code will be shown in a different format -->
</div>
</div>