JSFiddle - React, Tailwind, and code Playground

by yuezk

HTML

<div class="test-1"></div>
<div class="test-2 clearfix">
    <span class="left">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</span>
    <span class="right">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome</span>
</div>
<div class="test-3"></div>

CSS

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: '\20';
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
}

div {
    border: 1px solid #ddd;
    margin-bottom: 10px;
}

.test-1 {
    height: 100px;
}

.test-3 {
    position: relative;
    height: 100px;
    margin-top: -30px;
    background: rgba(0, 0, 0, .5);
}

div span {
    /*height: 100px;*/
    width: 50%;
}
.left {
    float: left;
}
.right {
    float: right;
}