left-right-inline-blocks

by Chris Dennis

HTML

<header>
<p style="text-align: justify;" ><img src="lhs" width="400" height="50" id="lhs">
    <img src="rhs" width="50"  height="50" id="rhs"></p>
    </header>
    <p>Something below</p>

CSS

header {
    text-align: justify;
    letter-spacing: 1px;
    height: 8em;
    padding: 2em 10%;
    background: #2c3e50;
    color: #fff;
}
#lhs { 
    display: inline-block;
    width: 100%;
    max-width: 300px;
    margin-right: 6px; /* leave room for rhs */
}
#rhs {
    display: inline-block;
    xposition: absolute;
    xright: 0em;  /* instead of margin */
}
* { border: 1px solid gray; }
body { border-color: blue; padding: 0.5em;}