CSS footer at bottom of FORM, not body/page

Question

I'm having trouble with multiple forms on the same page where I'm trying to get the footer element to be at the bottom of the section element of the following HTML:

<h2>Header</h2>
<section>
<img alt="" class="left margin" src="placeholder.png" />
<form action="/" method="post">
<fieldset>
<footer class="center"><input type="submit" /></footer>
</fieldset>
</form>
</section>

The image height is greater than the form's inherit height. I've tried position without luck and it seems Flexbox may be the way to go though I haven't been able to figure it out on my own. Additionally I need the footer to have it's background-color visible across 100% of the available width of the `section.

Since there are multiple forms on the same page with this exact HTML setup (with the footer within the form and fieldset elements) I'm not trying to get the footer at the bottom of the page like the ten thousand other questions here on Stack, only within the section element itself.

No JavaScript, I need this to be a pure CSS solution.

Here is the Fiddle: https://jsfiddle.net/11es8k8e/

CSS

* {border: 0; padding: 0; margin: 0;}
footer {background-color: #eee;}
form fieldset input {background-color: #ffc;}
img {heght: 100px; width: 100px;}
section {border: #ccc solid 1px; margin: 32px; overflow: auto;}
.left {float: left;}
.center {float: center; text-align: center;}
.right {float: right;}

Answer 1

I think you can use this piece of CSS:

img {
    position: relative;
    z-index: 1;
}

section{
    position: relative;
}

footer{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: red;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/11es8k8e/4/