JSFiddle - React, Tailwind, and code Playground

by qwweee7467

HTML

<div class="container">
    <div class="left">
        <p>The left column.</p>
        <p>The left column.</p>
        <p>The left column.</p>
        <p>The left column.</p>
    </div>
    <div class="right">
        <p>The right column.</p>
        <p>The right column.</p>
        <p>The right column.</p>
    </div>
</div>
<!------------------------------>
<div class="parent">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
</div>
<br/>
<br/>
<div class="parent group">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
</div>

CSS

div.container {
    border: 1px solid #000000;
    overflow: hidden;
    width: 100%;
}
div.left {
    width: 45%;
    float: left;
}
div.right {
    width: 45%;
    float: right;
}
/*----------------------------*/
 .parent {
    padding: 10px;
    background-color: red;
}
.child {
    width: 200px;
    height: 100px;
    float: left;
    border: 1px solid #000;
    margin:2px;
    background-color: green;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}

JavaScript

/* Force Element To Self-Clear its Children */