line out images to the left side among each other - css

Question

I have some images where I put a trach bin image on with z-index. This works. But when I resize the browser to a smaller screen the pictures slide over each other. But the intention is that they retain their original format and instead next to each other they line out to the left side among each other.
Below the code I use.
<style type="text/css">
.test {
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
display: inline-block;
min-width: 160px;
min-height: 120px;
width: 160 px;
height: 120px;
}
.trashbin {
position:absolute;
top: 65px;
left: 115px;
z-index: 3;
}
</style>
<fieldset>
<div class="form-group">
<div class="col-xs-4">
<img src="/img/l16001.jpg" class="test" >
<img src="/img/trash.png" class="trashbin">
</div>
<div class="col-xs-4 test2">
<img src="/img/l16001.jpg" class="test" >
<img src="/img/trash.png" class="trashbin">
</div>
<div class="col-xs-4 test2">
<img src="/img/l16001.jpg" class="test" >
<img src="/img/trash.png" class="trashbin">
</div>
</div>
</fieldset>

Answer 1

Using flexboxes for layout. Will wrap when needed.
.images {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.test2 {
display: flex;
flex-wrap: no-wrap;
align-items: center;
}
.test2 img {
margin-right: .5em;
}
<fieldset>
<div class="form-group images">
<div class="col-xs-4 test2">
<img src="http://placehold.it/100">
<img src="http://placehold.it/10" class="trashbin">
</div>
<div class="col-xs-4 test2">
<img src="http://placehold.it/100">
<img src="http://placehold.it/10" class="trashbin">
</div>
<div class="col-xs-4 test2">
<img src="http://placehold.it/100">
<img src="http://placehold.it/10" class="trashbin">
</div>
</div>
</fieldset>