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; }