JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">Content</div>
<div class="related">Related</div>
<div class="comments">Comments</div>

CSS

* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
}

.content {
    height: 100px;
    padding: 20px;
    background-color: rgba(0, 0, 0, .2);
}

.related {
    height: 200px;
    padding: 20px;
    background-color: rgba(0, 0, 0, .3);
}

.comments {
    height: 100px;
    padding: 20px;
    background-color: rgba(0, 0, 0, .4);
}

@media (min-width: 600px) {

    .content {
        float: left;
        width: 50%;
    }

    .related {
        float: right;
        width: 50%;  
    }
    
    .comments {
        float: left;
        width: 50%;  
    }
}