Sticky Container

HTML

<html class="firefox" lang="de-DE">

<head>
</head>

<body class="home blog">
<div id="wrapper" class="hfeed">
<header id="header">
<div id="branding">


</div>
<nav id="menu">

</nav>
</header>
<div id="container"><main id="content">
<article id="post-82" class="post-82 ff_one_pager type-ff_one_pager status-publish hentry">
<header>


 </header>
<section class="entry-content">
		
	
<div class="wp-block-columns has-2-columns">
<div class="wp-block-column">

	<ul class="akkordeon" id="akkordeon-block_5c8663b55669e">

	
		<li class="akkordeon_eintrag">

		    <b>Titel left</b>
			<p>Text</p>
			
		</li>

	
	</ul>


<style type="text/css">
	#akkordeon-block_5c8663b55669e {
		list-style:none;
	}
</style>


<div style="height:831px" aria-hidden="true" class="wp-block-spacer"></div>
</div>



<div class="wp-block-column">
<h2>Titel right</h2>



<figure class="wp-block-image"><img src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fimages01.oe24.at%2FGEPA_full_9834_GEPA-2411174.jpg%2FbigStory%2F310.395.663&f=1" alt="" class="wp-image-83"></figure>
</div>
</div>
	
	<div class="entry-links"></div>
</section></article><article id="post-80" class="post-80 ff_one_pager type-ff_one_pager status-publish hentry">
<header>


 </header>







</main>
</div>
<footer id="footer">
<div id="copyright">
© 2019 Titel</div>
</footer>
</div>


</body><style type="text/css"></style></html>

CSS

.wp-block-column:not(:first-child) {
    position: sticky;
    top: 0px;
}


.wp-block-audio figcaption {
 margin-top:.5em;
 margin-bottom:1em;
 color:#555d66;
 text-align:center;
 font-size:13px
}
.wp-block-audio audio {
 width:100%;
 min-width:300px
}
.editor-block-list__layout .reusable-block-edit-panel {
 align-items:center;
 background:#f8f9f9;
 color:#555d66;
 display:flex;
 flex-wrap:wrap;
 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
 font-size:13px;
 top:-14px;
 margin:0 -14px;
 padding:8px 14px;
 position:relative;
 z-index:7
}
.editor-block-list__layout .editor-block-list__layout .reusable-block-edit-panel {
 margin:0 -14px;
 padding:8px 14px
}
.editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__spinner {
 margin:0 5px
}
.editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__info {
 margin-right:auto
}
.editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__label {
 margin-right:8px;
 white-space:nowrap;
 font-weight:600
}
.editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__title {
 flex:1 1 100%;
 font-size:14px;
 height:30px;
 margin:4px 0 8px
}
.editor-block-list__layout .reusable-block-edit-panel .components-button.reusable-block-edit-panel__button {
 flex-shrink:0
}
@media (min-width:960px) {
 .editor-block-list__layout .reusable-block-edit-panel {
  flex-wrap:nowrap
 }
 .editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__title {
  margin:0
 }
 .editor-block-list__layout .reusable-block-edit-panel .components-button.reusable-block-edit-panel__button {
  margin:0 0 0 5px
 }
}
.editor-block-list__layout .reusable-block-indicator {
 background:#fff;
 border-left:1px dashed #e2e4e7;
 color:#555d66;
 border-bottom:1px dashed #e2e4e7;
 top:-14px;
 height:30px;
 padding:4px;
 position:absolute;
 z-index:1;
 width:30px;
...