JSFiddle - React, Tailwind, and code Playground

by swfour

HTML

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

CSS

.wrapper {
    overflow:hidden;
}
.sectionimage {
    /* must always be before text, even if floated right */
    vertical-align:bottom;
    max-width:400px;
    display:inline-block;
}
.left {
    float:left;
}
.right {
    float:right;
}
.left {
    margin-right:500px;
}
.right {
    margin-left:500px;
}
/* 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;
    }
}