JSFiddle - React, Tailwind, and code Playground

HTML

<div class="leftHalf">
<p><img style="margin-right: 5px; margin-bottom: 30px; float: left;" src="http://pagead2.googlesyndication.com/simgad/12894991046126729160" border="0" width="120" height="120" alt="Soundscope" class="img_ad">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><img style="margin-bottom: 30px; margin-right: 5px; float: left;" src="http://pagead2.googlesyndication.com/simgad/12894991046126729160" border="0" width="120" height="120" alt="Soundscope" class="img_ad">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; }
}

JavaScript

<div class="leftHalf">
<p><img style="margin-right: 5px; margin-bottom: 30px; float: left;" src="http://pagead2.googlesyndication.com/simgad/12894991046126729160" alt="Soundscope" width="120" height="120" border="0" />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><img class="img_ad" style="margin-bottom: 30px; margin-right: 5px; float: left;" src="http://pagead2.googlesyndication.com/simgad/12894991046126729160" alt="Soundscope" width="120" height="120" border="0" />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>