How to stick this image to the bottom of the div - css

Question

I would like this image(smaller - grey one) to stay at the bottom of its div(meadow image) when the window is resized.. I have tried with auto values on attributes but I guess it has something to do with positioning, can't figure out what it is exactly..any ideas maybe? Thanks a tonne!
Codepen: http://codepen.io/anon/pen/zoEYgP
.images {
background: url("http://kingofwallpapers.com/meadow/meadow-008.jpg");
background-size: cover;
height: 780px;
/*position: relative;*/
}
.smaller {
text-align: center;
}
.smaller img {
position: relative;
bottom: -280px;
}
#media screen and(max-width: 768px) {
.images {
height: auto;
/*position: relative;*/
}
.smaller img {
width: 80%;
/*height: auto;*/
/*margin-bottom: 0px;*/
}
}
<section class="images">
<div class="smaller">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97500&w=400&h=500" alt="">
</div>
</section>

Answer 1

see the codepen, I made smaller .image position: absolute and tweak some css aound
.images {
background: url("http://kingofwallpapers.com/meadow/meadow-008.jpg");
background-size: cover;
height: 768px;
/*height: 100vh;*/
min-height: 500px;
max-width: 100%;
position: relative;
}
.smaller img {
position: absolute;
bottom: 0;
left: 0;
max-width: 50%;
margin: 0 auto;
right: 0;
}
#media screen and(max-width: 768px) {
.images {
height: 100vh;
//position: relative;
}
.smaller img {
//width: 80%;
//height: auto;
//margin-bottom: 0px;
}
}
<section class="images">
<div class="smaller">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97500&w=400&h=500" alt="">
</div>
</section>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla laboriosam laborum sapiente sit voluptate voluptatum, velit eius quam minus natus incidunt omnis quidem cupiditate, maxime, ex reprehenderit minima enim!</p>