The following is what my website currently looks like,
I made a side navigation bar that will have links.
Placeholder items ‘test2’ and ‘test3’.
I need to get it to start at the top of page.

My ultimate goal is to toggle the sidebar when menu icon is clicked; therefore, the content of the page needs to resize to fill the page, hence why I used flex.
Here is my code:

    <div class="sidebar" style="
    display: inline-block;
    margin:0px;  width: 175px; 
    background-color: black; 
    box-shadow: 1px 0 3px -1px white;
    height: 100%;
    overflow: hidden;">
    
    <hr>
    <a href="" style="display:block; padding: 15px;">test</a> <hr>
    <a href="" style="display:block; padding: 15px;">test</a> <hr>
    <a href="" style="display:block; padding: 15px;">test</a> <hr>

</div>


    <div class="row"
    style=" 
        display: flex;
        flex-wrap: wrap;">

        <div class="column" 
        style="flex: auto;
            margin: 5px;
            padding: 15px;
            background-color: rgb(0,0,0,0);
            text-align: center;
            overflow: hidden;">
            Test2
        </div>
        <div class="column">
            Test3
        </div>
    </div>

It is quite apparent I am really struggling with understanding flow of elements on a page. Is there a detailed video that can explain this all?