JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div>
<div class="cover">cover 1</div>
<div class="info">info 1</div>
</div>


<div>
<div class="info">info 2</div>
<div class="cover">cover 2</div>
</div>


<div>
<div class="cover">cover 3</div>
<div class="info">info 3</div>
</div>


<div>
<div class="info">info 4</div>
<div class="cover">cover 4</div>
</div>

CSS

div { display: table; width: 100%; table-layout: fixed; }
div > div { display: table-cell; border: 1px solid #eee; margin-bottom: 0; }
.cover { background-color: #5db9e8;}
.info  { background-color: #ed7d7d;}

@media screen and (max-width:1024px) {
div {  width: 100%; text-align: center; float: left; }
}