JSFiddle - React, Tailwind, and code Playground

by linjunhalida

HTML

<div class="L1">
    <div class="L2">
        <div class="L3l">
            <h1>hello</h1>
            <p>This is a test.</p>
            <p>This is a test.</p>
        </div>
        <div class="L3r">
            this is side.
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<div class="L1">
    <div class="L2">
        <div class="L3l">
            <h1>hello2</h1>
        </div>
        <div class="L3r">
            this is side.
            <p>This is a test2.</p>
            <p>This is a test2.</p>
            <p>This is a test2.</p>
            <p>This is a test2.</p>

        </div>
        <div class="clearfix"></div>
    </div>
</div>

CSS

.L1 {width: 400px; background: #888; margin-bottom: 10px}
.L2 {background: #eee; margin-right: 110px}
.L3r {float: right; position: relative; width: 100px; margin-right: -105px}
.L3l {float: left}
.clearfix {clear:both}