JSFiddle - React, Tailwind, and code Playground

HTML

<div class="allcol">
    <div class="col1">item #1</div>
    <div class="col2">item #2</div>
    </div>

    <div class="allcol">
    <div class="col1b">item #3</div>
    <div class="col2">item #4</div>
    </div>

CSS

.allcol {display: table; table-layout: fixed; width: 100%;}
.col1, .col2, .col1b { width: 50%; display: table-cell; padding:20px; text-align:center;}
.col1, .col1b { background-repeat: no-repeat; background-position: center center; background:tomato; }

@media screen and (max-width:1169px) { 
}

@media screen and (max-width: 768px ) {
.allcol {display:block;}
.col1, .col2, .col1b { width: 100%; display:block;}
}