embedded images along images

Is there a way to place an image beside an embedded image (from getty for example). I managed to put two embedded images beside each other, but when I try to put an uploaded image beside the embedded (linked) one it moves in another row.

here is what i have, two embedde images beside each other:

[ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]

<div class="getty embed image" style="background-color: #fff; display: inline-block; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; color: #a7a7a7; font-size: 11px; width: 100%; max-width: 373px;">
<div style="overflow: hidden; position: relative; height: 0; padding: 159.249330% 0 0 0; width: 100%;"><iframe style="display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="//embed.gettyimages.com/embed/486118096?et=UbSXBEQHTjFO08fwv8ouIg&viewMoreLink=on&sig=S4px4NkOJduDlDaEv3GmOTDj6N3oBZWsybT0UkJA6QA=" width="373" height="594" frameborder="0" scrolling="no"></iframe></div>
<div style="padding: 0; margin: 0 0 0 10px; text-align: left;"><a href="https://www.gettyimages.com/detail/486118096">View image</a> | <a href="https://www.gettyimages.com">gettyimages.com</a></div>
</div>
<div class="getty embed image" style="background-color: #fff; display: inline-block; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; color: #a7a7a7; font-size: 11px; width: 100%; max-width: 333px;">
<div style="overflow: hidden; position: relative; height: 0; padding: 178.378378% 0 0 0; width: 100%;"><iframe style="display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="//embed.gettyimages.com/embed/495002697?et=bUbkj5O8QLV5UCyXsNvL3g&viewMoreLink=on&sig=XSrbFwiMLaDKaOLAJFfYOI7tVzAl_BHyTvO5DswJFuY=&caption=true" width="333" height="594" frameborder="0" scrolling="no"></iframe></div>
<div style="padding: 0; margin: 0 0 0 10px; text-align: right;"><a href="https://www.gettyimages.com/detail/495002697">View image</a> | <a href="https://www.gettyimages.com">gettyimages.com</a></div>
</div>

next row, embedded image:

<div class="getty embed image" style="background-color: #fff; display: inline-block; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; color: #a7a7a7; font-size: 11px; width: 100%; max-width: 301px;">
<div style="overflow: hidden; position: relative; height: 0; padding: 197.342193% 0 0 0; width: 100%;"><iframe style="display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="//embed.gettyimages.com/embed/486061740?et=cbFNg8oBR3pe8_14xiqfUg&viewMoreLink=on&sig=S_n5lQkWBMa1ZzLbr8te2lbtoCgtY8wsHLntZCpgaZw=" width="301" height="594" frameborder="0" scrolling="no"></iframe></div>
<div style="padding: 0; margin: 0 0 0 10px; text-align: right;"><a href="https://www.gettyimages.com/detail/486061740">View image</a> | <a href="https://www.gettyimages.com">gettyimages.com</a></div>
</div>

and, the third row; uploaded image, which I’d like to be next to the embedded image in the second row:

<a href="https://www.otvoreni.hr/ea/wp-content/uploads/2015/09/feather-broom.jpg"><img class=" alignright" src="https://www.otvoreni.hr/ea/wp-content/uploads/2015/09/feather-broom.jpg" alt="feather broom" width="396" height="594" align="right" /></a>