I am just creating my first serious web project built on Wordpress and during my task (basically learning by doing) i came to a following problem. The designer wants to show two columns of text on left and right side of the body of the webpage. Mostly that is of no problem, however the thing is, that the menu with some social media icons and quite a big logo is not located as a one straight flexbox or row, but makes a square on the upper right corner of the web page body.

And now, i would like to archieve to somehow fit the right column of the text bellow the menu. I tried few CSS approaches, creating a special CSS classes but nothing basically works, as both columns are wrapped by the content function. The situation can be seen here: /?page_id=30 for the sake of clarity i have highlighted the desired column to be moved with red colour.

Here is the original drawing from the designer how he would like the page to be displayed - .png

Here is the loop i use to call the content (my PHP proficiency is basically none, it is just that one works for me, so perhaps i did it all wrong):

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div id="content" role="main">

        <?php  the_content(); ?>

        </div><!-- #content -->

<p><?php _e('Sorry, nothing here'); ?></p>

The only way i have been able to solve it is to create two separate div blocks in the page itself and align those, which basically works fine, however i would to find any sollution where i can input the text through the Wordpress page/content creation, so end-users can edit and create the texts themselves. Maybe there is some way how do it with some Javascript or use different method od PHP loop? Any help would be appreciated.