How to align row to bottom in a nested column? - html

Question

Expected
Im having trouble placing two smaller images next to one larger image using Bootstrap 4. However, I cannot seem to align one of the smaller images to bottom such that it is aligned as the bigger image.
The grid should be responsive as well as the image text.
Any help is appreciated.
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="../assets/img/Iot.png" class="img-fluid">
<div class="carousel-caption text-justify" style="bottom: 0px;left: 10%;">
<h1 style="color:white !important">IoT</h1>
<p style="color:white !important">In the forefront of emerging technologies,
Internet of Things (IoT) applications are some of the most challenging and
innovative solutions to work with today... READ MORE</p>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col">
<img src="../assets/img/fintech.png" class="img-fluid">
<div class="carousel-caption text-justify" style="bottom: 0px;left: 10%;">
<h1 style="color:white !important">FinTech</h1>
<p style="color:white !important">The growth in digital banking is showing no
signs of slowing down. Convenience, speed and security aren’t just extra
benefits in consumers minds anymore... READ MORE</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<img src="../assets/img/smartapps.png" class="img-fluid">
<div class="carousel-caption text-justify" style="bottom: 0px;left: 10%;">
<h1 style="color:white !important">SmartApps</h1>
<p style="color:white !important">With people using their smartphones more and
more, they are now
demanding solutions that can help them complete their task event on the go…
READ MORE</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

added height and width to each image
.big img{
height: calc(500px + 1.5em);
}
.small img{
height:250px;
width:100%
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 big">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" class="img-fluid">
<div class="carousel-caption text-justify" style="bottom: 0px;left: 10%;">
<h1 style="color:white !important">IoT</h1>
<p style="color:white !important">In the forefront of emerging technologies,
Internet of Things (IoT) applications are some of the most challenging and
innovative solutions to work with today... READ MORE</p>
</div>
</div>
<div class="col-md-6">
<div class="row small">
<div class="col">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" class="img-fluid">
<div class="carousel-caption text-justify" style="bottom: 0px;left: 10%;">
<h1 style="color:white !important">FinTech</h1>
<p style="color:white !important">The growth in digital banking is showing no
signs of slowing down. Convenience, speed and security aren’t just extra
benefits in consumers minds anymore... READ MORE</p>
</div>
</div>
</div>
<div class="row mt-4 small">
<div class="col">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" class="img-fluid">
<div class="carousel-caption text-justify" style="bottom: 0px;left: 10%;">
<h1 style="color:white !important">SmartApps</h1>
<p style="color:white !important">With people using their smartphones more and
more, they are now
demanding solutions that can help them complete their task event on the go…
READ MORE</p>
</div>
</div>
</div>
</div>
</div>
</div>