To make it short, how to make an html element’s height expand/reduced with its content using css in WordPress Customizer ?

To clarify more, I’m trying to add a setting/control for the WP Customizer, this setting/control will reduce/expand header’s height and its content (logo, menu, social icons). My problem is that I reached my goal of height’s reducing/expanding, but the content inside of the header stays in its place without expanding or minimizing. So I want Header content to be like flexible, expandable with header’s height.

Here’s my code :

    //Add Header Height value setting
    $wp_customize->add_setting( 'header_height_settings' , array(
        'type' => 'option',
        'capability' => 'manage_options',
        'default' => '#',
        'sanitize_callback' => 'is_numeric_number', // is_numeric_number will check whether the given value is numeric or a number.
    ) );

    //Add Header Height value control
    $wp_customize->add_control( 'header_height_control', array( 
        'type'     => 'number',
        'label'    => __( 'Header Height' ),
        'description' => __( 'This is a custom height.' ), // Tooltip to understand what is this field made for
        'section'  => 'a_s_h_section',
        'settings' => 'header_height_settings'
    ) );

    //sanitizing here
    function is_numeric_number($number, $setting) {
        $numb = is_numeric($number);
        return ( $numb == true ) ? $number : $setting->default;
    }

    function my_custom_css_output() {

    echo '<style>
            /*Simple Mode*/
            #header {
                width: 100%;
                height: ' . get_option( 'header_height_settings', '#' ) . 'px; /* # is the default value of Opacity */
            }

        </style>';
}

I tried with the given code, but it is just controlling header’s height, I can make the header looks huge or small, expand it or reduce it, but when it comes to the elements inside of it, they are not moving at all.