JSFiddle - React, Tailwind, and code Playground

by martinschaer

HTML

<div class="wrapper">
    
    <div class="colleft">
        
        <div id="a" class="caja">A</div>

        <div id="b" class="caja">B</div>

        <div id="d" class="caja">D</div>

    </div> <!-- .colleft -->   
                
    <div class="colright">
                
        <div id="c" class="caja">C</div>

        <div id="e" class="caja">E</div>

        <div id="f" class="caja">F</div>

    </div> <!-- .colright -->
            
</div> <!-- .wrapper -->

CSS

.caja {
    width: 48px;
    height: 48px;
    margin: 10px 0 0 10px;
    background-color: #ccc;
    border: 1px solid #666;
    overflow: hidden; /* para que las cajas se comporten */
    float: left;
}

.colleft {
    float: left;
    width: 120px;
    background-color: #ffff66;
}

.colright {
    float: right;
    width: 60px;
    background-color: #66ffff;
}

.wrapper {
    width: 180px;
    border: 1px dotted #666;
    margin: 10px auto;
    padding: 0 10px 10px 0;
    overflow: hidden; /* para que contenga a todos sus elementos flotantes. leer mas: http://www.quirksmode.org/css/clearing.html */
}

#c {
    height: 108px;
}

#d {
    width: 108px;
    height: 108px;
}