JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="flex-container">

<div class="flex-item">box 1 hdjhdf jhdjdi djhdjdjd djhdjd djdjduid dduidfijd djdjd djudidn  box 1 hdjhdf jhdjdi djhdjdjd djhdjd djdjduid dduidfijd djdjd djudidn dujdidi box 1 hdjhdf jhdjdi djhdjdjd djhdjd djdjduid dduidfijd djdjd djudidn dujdidi dujdidi</div>
<div class="flex-item marg"></div>
<div class="flex-item">box 2 box 1 hdjhdf jhdjdi djhdjdjd djhdjd djdjduid dduidfijd djdjd djudidn dujdidi box 1 hdjhdf jhdjdi djhdjdjd djhdjd djdjduid dduidfijd djdjd djudidn dujdidi box 1 hdjhdf jhdjdi djhdjdjd djhdjd djdjduid dduidfijd djdjd djudidn dujdidi box 2 box 1 hdjhdf jhdjdi djhdjdjd djhdjd djdjduid dduidfijd djdjd djudidn dujdidi box 1 hdjhdf jhdjdi djhdjdjd djhdjd djdjduid dduidfijd djdjd djudidn dujdidi box 1 hdjhdf jhdjdi djhdjdjd djhdjd djdjduid dduidfijd djdjd djudidn dujdidi</div>

</div>

CSS

.flex-container { display: -ms-flexbox;display: -webkit-flex;display: flex;}
.flex-item {max-width:50%;background-color:#ccc;}
.marg {min-width:10px;min-height:10px;background-color:#fff;}

@media screen and (max-width: 768px) {
.flex-container {-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
.flex-item {max-width:100%;background-color:#ccc;}
.marg {background-color:#fff;}
}