JSFiddle - React, Tailwind, and code Playground

by Fiddler33

HTML

<div class="divMain">
    <div class="div2">
        <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 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: 45%;
    border: 2px solid red;
}

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