JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <img src="http://silberschauer.de/img/pre/045.jpg" />
</div>

CSS

#container {

    display: flex;                   /* new */
    flex-direction: column;          /* new */
    justify-content: space-between;  /* new */

    position: absolute;
    top: 1em;
    left: 1em;
    bottom: 2em;
    width: 30%;
    background: #0f0;
    overflow: hidden;
}

#container::before, #container::after {
    content: '';
}

#container img {
    width: 100%;
    flex-shrink: 0;
}