Move element out of div using css - html

Question

Effectively, I'm trying to move/position the inner paragraph element (p) from within the .box div (blue box) to be positioned above the .box div (blue box) in the fiddle below:
html, body {
margin: 0;
}
.box {
height: 200px;
width: 400px;
background: aqua;
color: black;
}
<div class="container">
<h4>Box heading</h4>
<div class="box">
<div class="contents">
<p>This is some awesome text, which is inside the box</p>
<p>This is also another great paragraph that is better than any book ever written</p>
</div>
</div>
</div>
My expected output is:
html,
body {
margin: 0;
}
.box {
height: 200px;
width: 400px;
background: aqua;
color: black;
}
.contents {
position: relative;
top: -50px;
}
<div class="container">
<h4>Box heading</h4>
<p>This is some awesome text, which is inside the box</p>
<p>This is also another great paragraph that is better than any book ever written</p>
<div class="box">
<div class="contents"></div>
</div>
</div>
However, in the above snippet, I have physically placed the paragraph elements above the blue box (.box div). Is there a way to essentially move the paragraph element from within the blue box above it using css.
I've tried using position attribute or giving the .contents a negative margin, however, this doesn't add space for the text to go above and causes overlapping issue with the heading and/or the blue box.
Note: The paragraphs within the box can be of any length, so I don't know the height and thus the offset needed for the paragraph.

Answer 1

You can consider position:relative for the content element and its container and use the same amount of pixel:
body {
margin: 0;
}
.box {
height: 200px;
width: 400px;
background: aqua;
color: black;
position: relative;
top: 110px;
}
.contents {
position: relative;
top: -110px;
}
<div class="container">
<h4>Box heading</h4>
<div class="box">
<div class="contents">
<p>This is some awesome text, which is inside the box</p>
<p>This is also another great paragraph that is better than any book ever written</p>
</div>
</div>
</div>
Or consider translate for a more dynamic way:
body {
margin: 0;
}
.box {
height: 200px;
width: 400px;
background: aqua;
color: black;
transform:translateY(40%); /*use 100% if height auto*/
}
.contents {
transform:translateY(-100%);
}
<div class="container">
<h4>Box heading</h4>
<div class="box">
<div class="contents">
<p>This is some awesome text, which is inside the box</p>
<p>This is also another great paragraph that is better than any book ever written</p>
</div>
</div>
</div>

Answer 2

You could remove the styles from .box on mobile and add them to .content::after. This will allow for any amount of content in the paragraphs and grow accordingly.
html, body {
margin: 0;
}
.box,
.contents::after {
height: 200px;
width: 400px;
background: aqua;
color: black;
}
/* Mobile only styles */
.box {
height: auto;
width: auto;
background: none;
}
.contents::after {
content: '';
display: block;
}
<div class="container">
<h4>Box heading</h4>
<div class="box">
<div class="contents">
<p>This is some awesome text, which is inside the box</p>
<p>This is also another great paragraph that is better than any book ever written</p>
</div>
</div>
</div>