Issue with <img> baseline influencing positioning of <div> with text in.

Hello,

I am hoping this is the right group to get help with this, as the
CSS-Discuss mailing list has died probably killed by Stack Overflow and
Stack Overflow will not allow me to post questions despite other people
posting dumb questions all the time.

I am having an issue of a <img> influencing the position of some text in a
<div> and totally messing up the positioning of the texts surrounding
<div>'s :-

https://codepen.io/AaronNGray/pen/XWGxQww

If I remove either the <img> or the text then the <div> moves backup to
where its supposed to be.

    <div class="container">
        <div class="main">
            <div class="banner">
                <div class="banner-left">
                    <div class="banner-left-inner">
                        <div class="banner-avatar">
                            <img class="avatar" src="
https://pbs.twimg.com/media/CafPV-xUEAAAW2u?format=jpg&name=small" />
                        </div>
                    </div>
                </div><!-- comment to remove whitespace
             --><div class="banner-right">
                    <div class="banner-right-inner">
                        <div class="banner-upper">
                            <!--span class="display-name">Aaron
Gray</span-->
                        </div>
                        <div class="banner-lower">
                            <div class="banner-lower-inner">
                                <div class="display-name">Aaron Gray</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    html{
        position: relative;
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
    }
    body {
        position: relative;
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
    }
    .container {
        position: relative;
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
    }
    .main {
        --width: 900px;
        position: relative;
        margin: 0 auto;
        max-width: var(--width);
        min-height: 100%;
    }
    .header {
        position: relative;
        left: 0px;
        top: 0px;
        width: 100%;
        min-height: calc(var(--width) * 9 / 16);
        background: gray;
    }
    .banner {
        display: block-inline;
        position: relative;
        top: 0px;
        width: 100%;
        height: 180px;
        border: 1px dotted red;
        color: transparent;
    }
    .banner-avatar {
        position: relative;
        left: 67.5px;
    }
    .banner-left {
        display: inline-block;
        border-image-width: 0px;
        margin: 0px;
        padding: 0px;
        border: 0px;
        background: transparent;
    }
    .banner-left-inner {
        display: block;
        width: 315px;
        border-image-width: 0px;
        margin: 0px;
        padding: 0px;
        border: 0px;
        background: transparent;
    }
    .banner-right {
        display: inline-block;
        border-image-width: 0px;
        top: 0px;
        width: 583px;
        margin: 0px;
        padding: 0px;
        background: transparent;
    }
    .banner-right-inner {
        display: block;
        top: 0px;
        width: 585px;
        min-height: 180px;
        border-image-width: 0px;
        margin: 0px;
        padding: 0px;
        border: 0px;
        background: transparent;
    }
    .banner-upper {
        position: relative;
        display: block;
        top: 0px;
        min-height: 90px;
        background: transparent;
    }
    .banner-lower {
        position: relative;
        display: block;
        top: 0px;
        min-height: 90px;
        background: silver;
        border: 1px dotted orange;
    }
    .banner-lower-inner {
        position: relative;
        display: block;
        top: 0px;
        min-height: 90px;
        background: gray;
        border: 1px dotted orange;
    }
    .avatar {
        position: relative;
        width: 180px;
        height: 180px;
    }
    .name {
        position: relative;
        left: calc(180px + 67.5px);
    }
    .display-name {
        vertical-align: top;
        color: black;
        background: red;
    }

Hope you can help, and its something simple !

Regards,

Aaron
-- 
Aaron Gray

Independent Open Source Software Engineer, Computer Language Researcher,
Information Theorist, and amateur computer scientist.