JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<div class="container">
    <div class="containerContent">
        <div class="component">
            <input class="button" type="button" value="Show Mobile Version"/>
            <span class="title">Fluid Layout (Pure CSS)</span>
        </div>
        <div class="clearFix"></div>
    </div>
</div>


<div class="container layout">
    <div class="containerContent row">
       
        <div class="group">
            <div class="column">
               <div class="component">
                Player 1:
               </div>
            </div>
            <div class="column">
                <div class="component">
                    <input class="text" type="text"/>
                </div>
            </div>
            
        </div>
        <div class="groupByTwo group">
            <div class="column">
                <div class="component">
                Player 2:
                </div>
            </div>
            <div class="column">
                <div class="component">
                    <input class="text" type="text"/>
                </div>
            </div>
          
        </div>
        <div class="clearFix"></div>
    </div>
</div>

CSS

.container{
    margin: 5px;
    border: 1px solid #fff;
    background-color:  #aaa;
    display: table-cell; 
}

.containerContent{
    margin: 1px;
    background-color: #f5f5f5;
 }

.group{  
   float: left;
   width: 50%;
}

.column{
    float: left;
    width: 50%;
    overflow: hidden;
}

.component{
    padding: 5px;   
}

body{
  
   background-color: #eee;
    font-family: Tahoma;
}

.clearFix{
 clear: both; zoom: 1;  
}


.text{
   width: 100%;
   border: 1px solid black;
}

.altRow{
   background-color: #fff;   
}

JavaScript

$(document).ready(function() {

    $('.layout').append(makeRow());


    $('.row:even').addClass('altRow');
 $(':button').click(function() {
        $('.group').toggleClass('ungroup');
        
        if($('.group').hasClass('ungroup')){
            $('.button').val('Show Desktop Version');
        }
        else{
            $('.button').val('Show Mobile Version');
        }
    });

});

function makeRow() {
    return $('.layout .row').first().clone();
}