JSFiddle - React, Tailwind, and code Playground

by Thet Hlaing

HTML

<div class="container">
    <div class="header">
        <div></div>
        <div>Col</div>
        <div>Col</div>
        <div>Col</div>
        <div>Col</div>
        <div>Col</div>					 
    </div>
    <div class="content">
    <div>Control</div>
    <div>AA</div>
    <div>AA</div>
    <div>AA</div>
	<div>AA</div>	
    </div>
</div>

CSS

.container {
  display: -webkit-flex;
  display: flex;
  flex-flow: column;
}
.header{flex-order: 1;display: -webkit-flex;display: flex;}
.header div {background-color: #1F3864;color: #fff;width: 20%;text-align: center;}
.content{flex-order: 2;display: -webkit-flex; display: flex;}
.content div{border:1px solid #1F3864;width: 20%;text-align: left;padding: 5px;}
.content div:not(:first-child){font-size: 12px;border-left: none;color: #C45911;font-weight: 600;}             
    
@media screen and (max-width:600px)
{
    .container {
        flex-flow: row;
        
    }
    .header,.content {
        flex-flow: column;
        width: 48%;
        max-width: 150px;
        
    }
    .header div{
        padding-top: 10px;
        height: 100px;
        width: 100%;        
    }
    .content div{
        width: 100%;        
        height: 99px;   
        border: 1px solid #1F3864;
        border-top: none;
       
     }
    .content div:first-child{
        border-top: 1px solid #1F3864;
        border-left: none;
        height: 98px;
        width: 100%;
    }
}