JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="subject-1">Here's some stuff that is supposed to be at the top-right of the screen when the screen is wide; and then be across the bottom of the screen when it is very narrow. But only one of these subject divs should appear at a time.</div>
    <p>1 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    <p>2 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    <p>3 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    <p>4 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    <p>5 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    <p>6 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    <div class="subject-2">Here's some stuff that is supposed to be at the top-right of the screen when the screen is wide; and then be across the bottom of the screen when it is very narrow. But only one of these subject divs should appear at a time.</div>
</div>

CSS

@media screen and (min-width: 250px) {
    .subject-1 {
        float:right;
        width:25%;
        color:red;
    }
    .subject-2 {
        display:none;
    }
}
@media screen and (max-width: 249px) {
    .subject-1 {
        display:none;
    }
    .subject-2 {
        width:100%;
        color:green;
    }
}