This design is almost complete, but I am facing difficulties in adding gutters between column divs in a row (on the right side, green). Additionally, configuring the width of the div that holds all the rows (blue) is proving to be challenging. You can find the code snippet on this jsfiddle, which also contains the layout image below. The main right-hand column will have an unknown number of items added dynamically, while the left side and its items are static.
The core structure of the layout is quite basic; could the issue possibly be related to overflow-y scrolling? Despite trying various adjustments, nothing seems to work:
<div class="wrapper-right" style="max-height:80%; overflow-y: scroll">
<div class="row mx-1 mb-1">
<div class="col-6 item-right px-2">
<p class="mt-0">item #1</p>
</div>
<div class="col-6 item-right px-2">
<p class="mt-0">item #2</p>
</div>
</div>
etc.
</div>