Container row alignment issue - html

Question

I'm currently working on my first ever website, this is using the twitter-bootstrap 4 framework. Everything was going swimmingly, until I have seemingly encountered the following issue.
I currently have this layout for my website:
Current Layout
When in fact I would like:
Desired Layout
I have attempted a plethora of solutions that I have found via browsing stack-overflow, such as nesting columns. None of it seems to work, I'm sure it is simply due to my inexperience, but I'm stumped as to how to get my desired appearance.
<div class="container-fluid bg-style-2">
<div class="row">
<div class="col-sm-9 par-style"><h2 class="par-heading">Welcome to my Website</h2>
</div>
<div class="col-sm-3">
<div id="myCarousel" class="carousel slide pull-right" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"><img src="img/Christina.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="1"><img src="img/NickyAndChristina.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="2"><img src="img/Nicky.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="3"><img src="img/Meme.JPG" alt="..."></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/Christina.JPG" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/NickyAndChristina.JPG" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/Nicky.JPG" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/Meme.JPG" alt="Fourth slide">
</div>
</div>
</div>
</div>
</div>
</div> <!-- End of Carousel -->
<div class="container-fluid bg-style-2">
<div class="row">
<div class="col-sm-9 par-style"><h2 class="par-heading">Test Header</h2>
</div>
</div>
</div>
As seen above, I am trying to have a photo gallery slider to the right of my website and the formatting I have attached above, it simply will not work. Can someone please give me some guidance? I have been thoroughly enjoying working on this website, but I cannot progress until I have resolved this as it will plague my mind.

Answer 1

#nedge
https://jsfiddle.net/saurabhanand/4f0pztcu/2/
<div class="container">
<div class="row container-0">
<div class="col-sm-6">
<div class="row container-1">
<div class="col-sm-12">
<img class="rgt-side-img" src="https://via.placeholder.com/500x250">
</div>
</div>
<div class="row container-2">
<div class="col-sm-6">
<img class="rgt-side-img" src="https://via.placeholder.com/500">
</div>
<div class="col-sm-6">
<img class="rgt-side-img" src="https://via.placeholder.com/500">
</div>
</div>
</div>
<div class="col-sm-6">
<img class="rgt-side-img" src="https://via.placeholder.com/500">
</div>
</div>
</div>
I hope this one helps. You can replace img tag with your own contents.