Bootstrap: Create images on same row - html

Question

I want to create a list item in a game that has a background, an iconholder with an icon inside it, a title and description and up to three resources. I am working with Bootstrap and thought that using a container-fluid with a row inside it might work but the images are placed underneath each other (see image) []
I don't want to use things like position:absolute, or set the margin at like -250% 0 0 0. Is there a way to say that images should be placed on top of one another, instead of underneath each other?
This is my HTML code thus far:
.resourceHolder
{
position: relative;
}
.resourceIcon
{
position: relative;
}
.nopadding
{
padding: 0 !important;
margin: 0 !important;
}
.iconHolder
{
position: relative;
width: 100%;
}
.icon
{
position: relative;
width: 65%;
}
.bannerText
{
font-family: FenwickWood;
color: #0062cc;
margin: 0 0 20% 0;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: beige;
pointer-events: none;
}
<div class="container-fluid">
<img class="background" src="assets/UI/window/wood_plank1.svg">
<div class="row">
<div class="col-sm-3 nopadding">
<img class="iconHolder" src="assets/UI/window/grid4L.svg">
<img class="icon" src="assets/Terrain_Medieval/Decor/villageSmall03.png">
</div>
<div class="col-sm-3 nopadding">
<h1 class="bannerText">Village</h1>
</div>
<div class="col-sm-2 nopadding">
<img class="resourceHolder" src="assets/UI/window/grid4L.svg">
<img class="resourceIcon" src="assets/Icons/gold_coins.png">
</div>
</div>
</div>

Answer 1

You can use CSS Grid layout, and put both images in the same cell.
Checkout out this jsfiddle: https://jsfiddle.net/dscmr7oz/.
Also, when you say you don't want to use things like position:absolute", why is that? It is a completely legitimate way to put things on top of each other. Are you aware that if you put an absolute-positioned element inside a relative-positioned element, that the inner element is absolutely positioned, relative to its parent?
.container {
position: relative;
}
.container .bottom-image {
position: absolute;
top: 0;
left: 0;
z-index: 1;
{
.container .top-image {
position: absolute;
top: 20px;
left: 20px;
z-index: 2
}