Align text next to image1 and under image2 HTML

Question

I've tried all the possibilities that I've found so far but I couldn't manage to make the text (and the second image) look like it should.

I guess it's just no big deal that I'm doing wrong, but I just can't figure it out what. Any help would be very much appreciated!

This is my html:

<div class="cf">
            <div><img src="https://www....></div>
            <div>
                <img src="https://www...>
                <p>Some text1</p>
                <p>
                    ABC <br />
                    D EF G
                </p>
           </div>
</div>

And this is my .css file:

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf > div {
    display: table-cell;
    vertical-align: top;
}

.cf {
    *zoom: 1;
}

Answer 1

On the left image, use float:left, and use padding-right to add a gap between the image and the text.

Create a new .clear div which will clear your floats and prevent any further elements floating.

.cf {
  
}
.cf .left-item {
  float:left;
  padding-right: 10px;
}
p {
  margin: 0;
}
.cf .right-item img + p {
  padding-bottom: 10px;
}
.clear {
  overflow:hidden;
  clear:both;
  width: 100%;
}

<div class="cf">
    <div class="left-item"><img src="https://www.ebner.cc/typo3temp/images/WAPPEN4-3d.png" width="52" height="61" alt=""></div>
    <div class="right-item">
        <img src="https://www.ebner.cc/fileadmin/redakteur/image/EBNER-Trademark.png" width="63" height="12" alt="EBNER">
        <p>Industrieofenbau GmbH</p>
        <p>Bearer of the <br />Austrian State Coat of Arm</p>
    </div>
    <div class="clear"></div>
</div>