Continue document flow after transform: translateY(-50%) - css

Question

I need to close the gap following a CSS transform: translateY(-50%) so that content flows on naturally.
I have tried other methods but have been unable to move the element up by 50% of its own height. Negative margin as a percentage is based on the height of the window so this doesn't seem like an option, nor can I set a negative margin on the following element as it needs to be based on the height of the header.
HTML:
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>
CSS:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
transform: translateY(-50%);
background-color: yellow;
}
JS Fiddle:
https://jsfiddle.net/robertirish/tyh18orq/16/
It may be that this is only possible using Javascript but it would be great to get it done with pure CSS as JS and media queries are a pain to implement.
Thanks in advance.

Answer 1

Instead of using transform: translateY(-50%), use margin-top: -25vh.This will place the .title-container in the same place, yet keep the .article-body flush below it:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
/*transform: translateY(-50%);*/
margin-top: -25vh;
background-color: yellow;
}
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>