JSFiddle - React, Tailwind, and code Playground

HTML

<div class="leftHalf">
<p>I will fill up the left half of the available space most of the time, but if the screen gets too small, will take up 100% of the screen width and turn red.</p>
</div>
<div class="rightHalf">
<p>I will fill up the right half of the available space most of the time, but if the screen gets too small, will take up 100% of the screen width and turn blue.</p>
</div>

CSS

.leftHalf{ width: 50%; float: left}
.rightHalf{ width: 50%; float: left }

@media (max-width: 320px){
    .leftHalf{ width: 100%; color: red; }
.rightHalf{ width: 100%; color: blue; }
}