JSFiddle - React, Tailwind, and code Playground

by Fiddler33

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%;
}
}

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

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