same img size in a row /// col-8 <-> col-4 - html

Question

I am absolute newbee and wanna create 2 rows. One with 2 img col-4 size and col-8 size and the other row à 3 x col-4 size.
My problem is that the col-8 img is a little bit bigger (height) then the col-4 img.
How can I fix it? I tried a lot but nothing worked.
Thanks for your help.
[problem
.col-4 {
padding-left: 5px;
padding-right: 5px;
}
.col-8 {
padding-left: 5px;
padding-right: 5px;
}
.x1 {
border: 1px solid black;
}
.x2 {
border: 1px solid black;
}
.x1_pic {
width: 100%;
height: auto;
position: relative;
}
.x2_pic {
width: 100%;
height: auto;
position: relative;
}
.x1_header {
position: absolute;
margin-top: -95%;
text-align: center;
}
.x2_header {
position: absolute;
margin-top: -95%;
text-align: center;
}
<div class="container">
<div class="row">
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-8">
<div class="x2">
<img class="x2_pic" src="./img/maschine_2.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
</div>
</div>
]1