Container not wrapping content from shortcode

Hi there,

Coming from Elementor via Oxygen I'm finding my way round GP and GB with a very simple test site. I'm impressed so far and have managed to solve a bunch of things based on excellent documentation and previous forum topics.

I hope you can help me resolve one issue. The single page element I've created for a custom post type ("events") includes a right sidebar element with two shortcodes that fetch ACF fields. I've used Code Snippets to hide headings if the assocociated ACF field is empty.

add_shortcode('custom_event_cost',function(){
$event_cost_field = get_field( "cost", get_the_ID() );
if( !empty($event_cost_field) ){ //if value exists
echo '<p><h4>Cost </h4>'.$event_cost_field.'</p>';
} 
});

add_shortcode('custom_event_date',function(){
$event_date_field = get_field( "date", get_the_ID() );
if( !empty($event_date_field) ){ //if value exists
echo '<p><h4>Date </h4>'.$event_date_field.'</p>';
} 
});

So far so good.

I've wrapped the shortcode blocks in a container and applied some simple styling to it. But the container is displying below the output of the shortcode:

http://blocks.lunadev.co.uk/events/winslade-wednesday/

Can you help me understand why this is and how I can fix it?

Assuming this is possible, can you help me with PHP for a new code snippet to hide the container (or the sidebar) if the ACF fields are both empty?

Thank you!