<ins> element shoving content in separate div further down page - html

Question

Why is the text in my <p> element being pushed down because of the existence of the <ins> tag? If you delete the <ins> tag from DOM via developer tools, you will see my text gets put in the position I expect.
main {
max-width: 1000px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
#portal-wrapper {
width: 100%;
padding: 40px 0;
background: #fff;
}
aside {
width: 100%;
padding: 10px 20px 20px;
box-sizing: border-box;
position: relative;
}
#media only screen and (min-width: 795px) {
main {
display: table;
}
#portal-wrapper {
display: table-cell;
min-width: 400px;
max-width: 680px;
width: auto;
}
aside {
width: 300px;
display: table-cell;
padding-right: 0;
padding-top: 41px;
}
}
<main>
<div id="portal-wrapper">
<div id="portal">
<p>
Here's my text. Why am I pushed down so far.
</p>
</div>
</div>
<aside>
<ins style="display: block; height: 600px;"> </ins>
</aside>
</main>
Fiddle here: https://jsfiddle.net/wwvq7net/1/

Answer 1

You could use vertical-align: top property:
main {
max-width: 1000px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
#portal-wrapper {
width: 100%;
padding: 40px 0;
background: #fff;
}
aside {
width: 100%;
padding: 10px 20px 20px;
box-sizing: border-box;
position: relative;
}
#media only screen and (min-width: 795px) {
main {
display: table;
}
#portal-wrapper {
display: table-cell;
vertical-align: top;
min-width: 400px;
max-width: 680px;
width: auto;
}
aside {
width: 300px;
display: table-cell;
vertical-align: top;
padding-right: 0;
padding-top: 41px;
}
}
<main>
<div id="portal-wrapper">
<div id="portal">
<p>
Here's my text. Why am I pushed down so far.
</p>
</div>
</div>
<aside>
<ins style="display: block; height: 600px;"> </ins>
</aside>
</main>
JSFiddle

Answer 2

When you set display:table-cell those elements are automatically starting with vertical-align:baseline which is why your #portal is being pushed to the bottom of #portal-wrapper.
Change to vertical-align:top or another value to fix this. Read more about vertical-align here.