I have successfully created the sidebar, but I am looking to make it fixed with a vertical scroll bar.
The desired outcome can be seen here: https://i.sstatic.net/3c9zD.jpg
My attempt at achieving this was unsuccessful:
<div class="col-md-4 bg-light px-0">
<div class="sidebar px-3">
<h3 class="mt-4">Rental</h3>
<h3 class="mt-2">from $99</h3>
<p class="mb-5">per night</p>
<form action="">
<p><i class="fa fa-calendar-check-o pr-1"></i>Check in</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="DD MM YYYY" required>
</div>
<p class=""><i class="fa fa-calendar-o pr-1"></i>Check out</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="DD MM YYYY" required>
</div>
<p class=""><i class="fa fa-male pr-1"></i>Adults</p>
<div class="form-group">
<input type="number" class="form-control" placeholder="1" required>
</div>
<p class=""><i class="fa fa-child pr-1"></i>Kids</p>
<div class="form-group">
<input type="number" class="form-control" placeholder="0" required>
</div>
<div class="form-group">
<button type="submit" class="form-control btn btn-success w-100"><i
class="fa fa-search pr-3"></i> Search availability</button>
</div>
</form>
</div>
<div class="hoverablediv">
<div class="py-3 p-3"><a href="#" class="text-decoration-none text-dark"><i
class="fa fa-building pr-1"></i>Apartment</a></div>
<div class="py-3 p-3" data-toggle="modal" data-target="#myModal"><a href="#"
class="text-decoration-none text-dark"><i class="fa fa-rss pr-1"></i>Subscribe</a></div>
<div class="py-3 p-3"><a href="#" class="text-decoration-none text-dark"><i
class="fa fa-envelope pr-1"></i>Contact</a></div>
</div>
</div>
</div>