JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">

<div class="flex-container">
<div class="item"><div>1</div></div>
<div class="item"><div>2</div></div>
</div>

<div class="flex-container">
<div class="item"><div>3</div></div>
<div class="item"><div>4</div></div>
</div>

</div>

CSS

.flex-container:nth-child(odd) {border:solid #000000;border-width:0 0 1px 0;}

.flex-container {box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    }
    
.item {width:50%;background-color:pink;box-sizing: border-box;}
.item:hover {background-color:yellow;}

.item:nth-child(even) {border:solid #000000;border-width:0 0 0 1px;}  
.item:nth-child(odd) {border:solid #000000;border-width:0 0 0 0;} 


.item div {max-width:400px;margin:0 auto 0 0;background-color:lightBlue;}
.item:nth-child(odd) div {margin:0 0 0 auto;}  
    
@media screen and (max-width: 640px) {
.item {width:100%;}
.item:nth-child(odd) div {margin:0 auto 0 0;} 
}