JSFiddle - React, Tailwind, and code Playground

HTML

<div class="divMain">
    <div class="div2">
        <img src="http://peterspowerproducts.com/wp-content/uploads/2014/06/boat.jpg" />
    </div>
    <div class="div3">
        <p> some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
    </div>
</div>

CSS

.divMain{
    height: 500px;
    width: 100%;
    border: 2px solid black;
}

.div2{
    display: inline-block;
    height: 200px;
    width: 40%;
    border: 2px solid red;
}

.div2 img{
    height: auto;
    width: 80%;
    vertical-align: top;
}

.div3{
    display: inline-block;
    height: 200px;
    width: 45%;
    border: 2px solid blue;
    vertical-align: top;
}

@media only screen and (max-width: 500px) {
    .div2{
        background-color: red;
    }
    
    .div3{
        background-color: blue;
    }
}
}