Anything is possible, if you're at work and procrastinating... this is a Stylus rearrangement, so it's only visible in your own browser window and doesn't actually change the sheet, just the way it displays. Click for gif:

I'm not really sure what you wanted to do with the empty space, that could potentially be a bit trickier. Or maybe not - changing the second line to display: none instead of visibility: hidden should just shift everything to the top of the column, if that's all you wanted to do.
The 5e sheet makes heavy use of absolute pixel values, so I can't really be sure how this will look in someone else's browser either - it might not be quite right.
The code (a bit messy, since those containers aren't in the bio <div>) :
.container.pc input[type=radio].tab-button.core:checked ~ .page.core .textbox.pibf {
visibility: hidden;
}
.container.pc input[type=radio].tab-button.bio:checked ~ .page.core {
display: block!important;
}
.container.pc input[type=radio].tab-button.bio:checked ~ .page.core .col {
display: none;
}
.container.pc input[type=radio].tab-button.bio:checked ~ .page.core .col.col3 {
display: block;
position: absolute;
right: -30px;
top: 330px;
}
.container.pc input[type=radio].tab-button.bio:checked ~ .page.core .col.col3 .hero-points,
.container.pc input[type=radio].tab-button.bio:checked ~ .page.core .col.col3 .resources,
.container.pc input[type=radio].tab-button.bio:checked ~ .page.core .col.col3 .traits {
display: none;
}
.charsheet .container.pc input[type=radio].tab-button.bio:checked ~ .page.core .textbox.pibf {
display: block;
}
.page.bio .col2-3 {
width: 270px;
}