JSFiddle - React, Tailwind, and code Playground

by Yandy Viera

HTML

<div id="containerDiv">
    <div id="div1">
        <p>Test 1 Lorem Ipsum.</p>
    </div>
    <div id="div2">
        <p>Test 2 Lorem Ipsum. Prion gravida nibh vel velit auctor aliquet. Aenean solicitudin, lorem quis bibendum auctor, nisi elit consquat ipsum, nec sagittas sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor aliquet. Aenean solicitudin, lorem quis bibendum auctor, nisi elit consquat ipsum, nec sagittas sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor aliquet. Aenean solicitudin, lorem quis bibendum auctor, nisi elit consquat ipsum, nec sagittas sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor aliquet. Aenean solicitudin, lorem quis bibendum auctor, nisi elit consquat ipsum, nec sagittas sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit neque. Suspendisse in orci enim.</p>
    </div>
    <div id="div3">
        <p>Test 3 Lorem Ipsum. Prion gravida nibh vel velit auctor aliquet. Aenean solicitudin, lorem quis bibendum auctor, nisi elit consquat ipsum, nec sagittas sem nibh id elit.</p>
    </div>
    <div id="div4">
        <p>Test 4 Lorem Ipsum. Prion gravida nibh vel velit auctor aliquet. Aenean solicitudin, lorem quis bibendum auctor, nisi elit consquat ipsum, nec sagittas sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit neque. Suspendisse in orci enim.</p>
    </div>
    <div id="div5">
        <p>Test 5 Lorem Ipsum. Prion gravida nibh vel velit auctor aliquet. Aenean solicitudin, lorem quis bibendum auctor, nisi elit consquat ipsum, nec sagittas sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit neque. Suspendisse in orci enim.</p>
    </div>
    <div id="div6">
        <p>Test 6 Lorem Ipsum....

CSS

#containerDiv {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}
#div1 {
    border: 1px solid red;
    background-color: red;
    margin-bottom: 10px;
    width: 25%;
    float: right;
}
#div2 {
    border: 1px solid blue;
    background-color: blue;
    margin-bottom: 10px;
    width: 65%;
    float: left;
}
#div3 {
    border: 1px solid green;
    background-color: green;
    margin-bottom: 10px;
    width: 25%;
    float: right;
}
#div4 {
    border: 1px solid orange;
    background-color: orange;
    margin-bottom: 10px;
    width: 25%;
    float: right;
    clear: right;
}
#div5 {
    border: 1px solid purple;
    background-color: purple;
    margin-bottom: 10px;
    width: 25%;
    float: right;
    clear: right;
}
#div6 {
    border: 1px solid pink;
    background-color: pink;
    margin-bottom: 10px;
    width: 65%;
    display: inline-block;
}