JSFiddle - React, Tailwind, and code Playground

by atatakobry

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class='d1'>
        <p>
            Cotton candy chocolate bar fruitcake gummies liquorice liquorice chocolate cake icing marzipan. Gummies marshmallow toffee candy canes. Croissant lemon drops carrot cake lollipop brownie pudding jelly beans. Faworki jujubes gingerbread icing. Pudding toffee icing tootsie roll tootsie roll. Icing halvah icing chocolate sweet. Faworki toffee cheesecake tiramisu pastry croissant gingerbread tart. Jelly caramels jujubes croissant icing. Chocolate bar croissant caramels soufflé bonbon danish chocolate bar dessert.
        </p>
    </div>
    
    <div class="d2">
        <div class="d2-left">
            <p>
                Danish carrot cake marzipan wafer toffee. Ice cream cheesecake gummi bears tootsie roll wafer jelly-o marshmallow. Pie sweet roll icing danish dessert. Sugar plum lemon drops danish pudding jelly-o.
            </p>
        </div>
        <div class="d2-right">
            <p>
                Candy canes tiramisu faworki oat cake oat cake lemon drops icing. Pie dragée wafer marshmallow. Wypas topping gummies chocolate cake tiramisu chupa chups chocolate macaroon gingerbread.
            </p>
        </div>
    </div>
    
    <div class="d3">
        <p>
            Cotton candy chocolate bar fruitcake gummies liquorice liquorice chocolate cake icing marzipan. Gummies marshmallow toffee candy canes. Croissant lemon drops carrot cake lollipop brownie pudding jelly beans. Faworki jujubes gingerbread icing. Pudding toffee icing tootsie roll tootsie roll. Icing halvah icing chocolate sweet. Faworki toffee cheesecake tiramisu pastry croissant gingerbread tart. Jelly caramels jujubes croissant icing. Chocolate bar croissant caramels soufflé bonbon danish chocolate bar dessert.
        </p>
    </div>
    
    <div class="d4">
        <p>
            Muffin wafer biscuit. Fruitcake caramels sugar plum. Marshmallow dragée croissant....

CSS

p {
    margin: 100px 0;
}

.d1, .d2, .d3, .d4 {    
    margin: 60px 0;
    outline: 1px solid red;
}

.d2 {
    overflow: hidden;
}

.d2-left {
    float: left;
    width: 200px;
}

.d2-right {
    float: right;
    width: 200px;
}