Content block pushed to the bottom - html

Question

I am currently in the process of writing mark up which has content on either side and an image that floats either left or right towards the top - this works fine.
However, when you introduce too much content on the left or right hand side, the content box does not want to move down but moves up and then moves down to cover the gap. But i would like the gap.
Example Below: If you cant reproduce it below; please try: https://jsfiddle.net/171f14cg/
article {
min-height: 450px;
position: relative;
margin-bottom: 120px;
}
article.art-white-bg {
color: black;
}
article.art-white-bg .content-area-push {
background-color: white;
box-shadow: 0px 18px 26px -5px rgba(0, 0, 0, 0.74);
}
article .content-area-push {
position: absolute;
min-height: 350px;
bottom: 0;
}
article.right-image figure {
right: 0;
}
article figure {
position: absolute;
max-height: 360px;
z-index: 1;
}
article.right-image .art-content {
float: left;
width: 30%;
}
article .art-content {
padding: 50px 45px;
}
<article class="main-article right-image art-white-bg animated hidden visible fadeInUp">
<div class="content-area-push">
<div class="art-content">
<header>
<h2>Working example cause of low amount of content</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p>
</div>
</div>
<figure>
<img src="https://placeholdit.imgix.net/~text?txtsize=52&txt=550%C3%97350&w=580&h=360" alt="Baby Orang Utan hanging from a rope">
</figure>
</article>
<article class="main-article right-image art-white-bg animated hidden visible fadeInUp">
<div class="content-area-push">
<div class="art-content">
<header>
<h2>Example that does not work</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p>
</div>
</div>
<figure>
<img src="https://placeholdit.imgix.net/~text?txtsize=52&txt=550%C3%97350&w=580&h=360" alt="Baby Orang Utan hanging from a rope">
</figure>
</article>

Answer 1

I think you're looking for something like this:
https://jsfiddle.net/dee0gjaz/
I removed a number of attributes from several elements. Basically, you were over-styling a little bit. Your text content did not need absolute positioning. That should be static so that it can stretch the parent.
The image however, can remain absolute and with a negative top measure you will have consistent offset.