JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <img class="sectionimage left" src="image.jpg" />
    <div class="sectiontext"> <p>Some text.</p> </div>
</div>

CSS

.wrapper {
    overflow:hidden;
}

.sectionimage { /* must always be before text, even if floated right */
    vertical-align:bottom; 
    max-width:400px;
}

.left {
    float:left;
}

.right {
    float:right;
}

.left + .sectiontext {
    margin-left:500px; /* left margin for text after a "left" image */
}

.right + .sectiontext {
    margin-right:500px; /* right margin for text after a "right" image */
}

/* images and text displayed as blocks */
@media only screen and (max-width:950px) 
{
    .sectionimage, .sectiontext {
        display:block;
        width:100%;
    }

    .sectionimage {
        float:none;
    }

    .sectiontext {
        margin:0px !important;
    }
}