Bootstrap 4 - Two small align images beside a large image - html

Question

I'm trying to achieve this using Bootstrap 4.
(source: imgh.us)
As seen on the image I need 2 columns both having same height, no matter what is the resolution of the pictures inside. The left one is having one big picture and the right one 2 small ones with some gap aligned perfectly to the big one.
Any help would be really appreciated!
My code so far:
HTML:
<div class="row">
<div class="col-lg-6">
<div class="imagebox">
<img class="img-fluid" src="https://placehold.it/1000x1000" alt="">
</div>
</div>
<div class="col-lg-6">
<div class="imagebox">
<img class="img-fluid" src="https://placehold.it/400x600" alt="">
</div>
<div class="spacer30"></div>
<div class="imagebox">
<img class="img-fluid" src="https://placehold.it/400x600" alt="">
</div>
</div>
</div>
CSS:
.imagebox{
overflow: hidden;
width: 100%;
height: auto;
}
.spacer30{
height:30px;
}

Answer 1

It should be something like this.
(Run code snippet and open in full page)
$(document).ready(function() {
var loImage = $('#myHeightImage'),
loSideImages = $('#sideImages');
// http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached
loImage.on("load", function() {
loSideImages.height(loImage.height());
});
window.onresize = function(event) {
loSideImages.height(loImage.height());
};
});
div.col-md-6 div {
height: 50%;
background-position: center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div class="container">
<div class="row">
<img src="http://lorempixel.com/1280/720/people" id="myHeightImage" class="col-md-6"/>
<div id="sideImages" class="col-md-6">
<div style="background-image: url(http://lorempixel.com/1280/720/animals)"></div>
<div style="background-image: url(http://lorempixel.com/1280/720/nature)"></div>
</div>
</div>
</div>

Answer 2

well #Quanta is correct, gave you a perfect example , if you want to add gap between right images you can add margin-bottom:1px to your right-top image, might help you, check out this snippet
$(document).ready(function() {
var loImage = $('#myHeightImage'),
loSideImages = $('#sideImages');
// http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached
loImage.on("load", function() {
loSideImages.height(loImage.height());
});
window.onresize = function(event) {
loSideImages.height(loImage.height());
};
});
div.col-md-6 div {
height: 50%;
background-position: center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div class="container">
<div class="row">
<img src="http://lorempixel.com/1280/720/people" id="myHeightImage" class="col-md-6"/>
<div id="sideImages" class="col-md-6">
<div style="background-image: url(http://lorempixel.com/1280/720/animals);
margin-bottom: 1px;"></div>
<div style="background-image: url(http://lorempixel.com/1280/720/nature)"></div>
</div>
</div>
</div>