JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<div class="wrapper">
<div class="col1"><h2>Col1</h2><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quas quae, inventore magni odio omnis vel eius, iusto nisi autem. Fuga suscipit quam aliquid voluptates pariatur explicabo nobis ipsum deleniti?</span></div>
<div class="col2"><h2>Col2</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quas quae, inventore magni odio omnis vel eius, iusto nisi autem. Fuga suscipit quam aliquid voluptates pariatur explicabo nobis ipsum deleniti?
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex ut, fugiat alias expedita quis, quae tempore consectetur quo illum eum asperiores perferendis quisquam praesentium aliquam ipsa sequi veritatis aperiam, delectus.</div>
<div class="col3"><h2>Col3</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quas quae, inventore magni odio omnis vel eius, iusto nisi autem. Fuga suscipit quam aliquid voluptates pariatur explicabo nobis ipsum deleniti?</div>
</div>

SCSS

html,
body {
  height: 100%;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
  height: 100%;
  div {    
    background: #ccc;
    border: 1px solid black;
    box-sizing: border-box;
    text-align: center;
    padding:5px;
  }
}


[class^="col"]{
  display:inline-block;
  vertical-align:top;
  height:100%;
  float:left;
  max-width:100%;
  min-height:10%;
}
.col1 {
  width: 20%;
}

.col2 {  
  width: 60%;
}

.col3 {
  width:  20%;
}
@media(max-width:999px){
  .wrapper{
    width:95%;
  }
  .col1{

  }
  .col2{
    width:80%   
  }      
  .col3{
    clear:both;
    top:80px;
    height:auto;
    position: static;
    width:100%;
  }      
}
@media(max-width:599px){
  .col1{      
 width:100%;
 height:auto; 
 }
  .col2{        
    width:100%;
    height:auto;         
  }  
  .col3{
    position:static;
   clear:none; 
  }
  
  
  
}