JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="sectiontext right">
        <p>Some text. Some text. Some text. Some text. Some text. Some text.</p>
    </div>
    <img class="sectionimage" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Joos_de_Momper_(II)_-_Extensive_Mountainous_Landscape_-_WGA16125.jpg" />
</div>

CSS

.wrapper {
        overflow:hidden;
    }

    .sectionimage { 
        max-width:300px;
    }
    
    .left {
        float:left;
    	display:inline-block;
    	width:calc(100% - 350px);
    }
    
    .right {
        float:right;
    	display:inline-block;
    	width:calc(100% - 350px);
    }
    
    /* text displayed as block */
    @media only screen and (max-width:500px) 
    {
        .sectiontext,.sectionimage {
            width:100%;
        }
    }