```css
.col-6 h1 {
  color: white;
  text-align: center;
}
h1 {
  background-color: red;
}

.COL1, .COL2 {
  border: 1px solid red;
}
```

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<br></br>
<div class='container'>
  <div class='row'>
    <div class='col-6 COL1'>
      Lorem ipsum dolor sit amet consectetur adipiscing elit risus conubia ante, congue faucibus ac a non aptent nisi per commodo facilisi id, tempus lacus maecenas tincidunt mus sociosqu elementum ornare eget. Nascetur vestibulum hac tempor integer semper curae tempus etiam massa, platea fusce pellentesque aenean conubia at lectus non penatibus, nibh venenatis himenaeos scelerisque placerat imperdiet dignissim felis. Feugiat fames lectus magna aenean porttitor taciti hendrerit, integer facilisi nibh habitant dignissim sollicitudin aliquam, massa faucibus dictumst maecenas rhoncus sapien.
    </div>
    <div class='col-6 COL2'>
      <h1>ADVERTISE</h1>
      <div>Lorem ipsum dolor sit amet consectetur adipiscing elit risus conubia ante, congue faucibus ac a non aptent nisi per commodo facilisi id, tempus lacus maecenas tincidunt mus sociosqu elementum ornare eget. Nascetur vestibulum hac tempor integer semper curae tempus etiam massa, platea fusce pellentesque aenean conubia at lectus non penatibus, nibh venenatis himenaeos scelerisque placerat imperdiet dignissim felis. Feugiat fames lectus magna aenean porttitor taciti hendrerit, integer facilisi nibh habitant dignissim sollicitudin aliquam, massa faucibus dictumst maecenas rhoncus sapien.</div>
      <h1>ADVERTISE</h1>
    </div>
  </div>
</div>
```

Right Now this HTML is false like this

[![enter image description here](https://i.stack.imgur.com/duho7.png)](https://i.stack.imgur.com/duho7.png)

But What I want is to make ***Lorem ipsum*** text gets **overflow:scroll** To keep the Height of the **COL2** equal to **COL1** like this

[![enter image description here](https://i.stack.imgur.com/clDRE.png)](https://i.stack.imgur.com/clDRE.png)

And if the ***Lorem Ipsum*** text is too **short** not to make an **overflow**, Then it just gets over itself like this

[![enter image description here](https://i.stack.imgur.com/K1gwW.png)](https://i.stack.imgur.com/K1gwW.png)

keeping **ADVERTISE** at the **BOTTOM** as the **Max-Height** the ***Lorem Ipsum*** can reach.

Is that possible using **Bootstrap** or **CSS** without **JS**?

P.S. **COL1** doesn't/can't have a **Fixed-Height**.