JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div>DIV before first image</div>
    <img class="floatLeft" src="http://placehold.it/200x100&text=First+image">
    <div>DIV after first, before second</div>
    <img class="floatRight" src="http://placehold.it/200x100&text=Second+image">
    <div>First DIV after second image</div>
    <div style="display:block;">text</div>
    <div style="display:block;">text</div>
    <div style="display:block;">text</div>
    <div style="display:block;">text overlapping second image, not good</div>
    <div>last DIV</div>
</div>

CSS

.wrapper {
    width:420px;
    overflow:auto;
}
.wrapper>*{
    display: inline;
}
.wrapper>div:first-child{
    display:block;
}



.floatRight {
    float: right;
    clear:both;
}
.floatLeft {
   
    clear:both;
}
img {
    border:1px solid green;
}
div {
    background:red;
}