Get selected variation price and sku and display it to single product in woocommerce

Question

I want to display current selected variation price and sku @ woocommerce_before_single_product_summary How do I get the values and display them on top of the page inline with styling?

I'm working with these resources:

Get and display the selected variation SKU in WooCommerce

Get currently selected variation and data from Woocommerce variable product

WooCommerce: show current SKU and GTIN in variable product page

This is what I have:

// Display product variations SKU and price 
add_filter( 'woocommerce_available_variation', 'display_variation_sku_and_price', 20, 3 );
function display_variation_sku_and_price( $variation_data, $product, $variation ) {
    $html = ''; // Initializing

    // Inserting SKU
    if( ! empty( $variation_data['sku'] ) ){
        $html .= '</div><div class="woocommerce-variation-sku">' . __('SKU:') . ' ' . $variation_data['sku'];
    }

      // Inserting price
    if( ! empty( $variation_data['price'] ) ){
        $html .= '</div><div class="woocommerce-variation-price">' . __('price:') . ' ' . $variation_data['price'];
    }
    
    

    // Using the variation description to add dynamically the SKU and the price
    $variation_data['variation_description'] .= $html;

    return $variation_data;
}

add_action('woocommerce_before_single_product_summary', 'display_product_sku_and_price', );
function display_product_sku_and_price() {
    global $product; 

    echo '<p>' . __("SKU:") . ' ' . $product->get_sku() . '</p>';
  echo '<p>' . __("Price:") . ' ' . $product->get_price() . '</p>';
       
}

I can make it work inside variations form but not move it outside/up.