JSFiddle - React, Tailwind, and code Playground

by p4bl1t0

HTML

<div><p>Sin Clearfix HTML</p>
<div class="contenedor">
    <div class="principal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel auctor tortor. Donec tortor est, scelerisque at facilisis at, consequat in magna. Nunc at turpis sit amet est eleifend rhoncus. Ut accumsan seetra beifend velit dui et ipsum. Sed vehicula luctus lectus id venenatis. Aenean eget felis ipsum, nec laoreet sapien. Proin commodo bibendum odio vel pretium. </div>
    <div class="barra-lateral">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel auctor tortor. Donec tortor est, scelerisque at facilisis at, consurpis pretium fermentum. Donec ornare pharetra blandit. Maeceterdum </div>

</div>
<div  style="clear:both;" ><p>Con Clearfix HTML</p>
<div class="contenedor">
    <div class="principal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel auctor tortor. Donec tortor est, scelerisque at facilisis at, consequat in magna. Nunc at turpis sit amet est eleifend rhoncus. Ut accumsan seetra beifend velit dui et ipsum. Sed vehicula luctus lectus id venenatis. Aenean eget felis ipsum, nec laoreet sapien. Proin commodo bibendum odio vel pretium. </div>
    <div class="barra-lateral">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel auctor tortor. Donec tortor est, scelerisque at facilisis at, consurpis pretium fermentum. Donec ornare pharetra blandit. Maeceterdum </div>
    <div class="separador"></div>
</div>
</div>
<div style="clear:both;"><p>Con Clearfix CSS (HTML limpio)</p>
<div class="contenedor grupo">
    <div class="principal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel auctor tortor. Donec tortor est, scelerisque at facilisis at, consequat in magna. Nunc at turpis sit amet est eleifend rhoncus. Ut accumsan seetra beifend velit dui et ipsum. Sed vehicula luctus lectus id venenatis. Aenean eget felis ipsum, nec laoreet sapien. Proin commodo bibendum odio vel pretium. </div>
    <div...

CSS

.contenedor
{
    height:auto;
    border:3px solid gray;
}
.separador{
    clear:both;
}
.principal{
    float:left;
    width:68%;
    
    border:1px solid blue;  
}

.barra-lateral{
    float:right;
    width:28%;
    border: 1px solid green;
}
p
{
    color:red;
    border-bottom: 3px solid red;
    
}
.grupo:before,
.grupo:after {
    content:"";
    display:table;
}
.grupo:after {
    clear:both;
}
.grupo {
    zoom:1; 
}