JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<ul>
    <li>
        <div class="box1"></div>
        <div class="box2"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta voluptatum iure doloremque quaerat labore odit necessitatibus consequuntur repudiandae quia veritatis vitae hic facere nesciunt fugiat quas saepe quae nemo dolores.</p>
    </li>
</ul>

CSS

ul{
    /* list-style:none; */
    padding:0;
    margin:0;
}
li{
    position:relative;
    background-color:red;
    margin-bottom:20px;
}
.box1{
    position:absolute;
    width:20px;
    height:20px;
    top:0;
    left:0;
    background-color:green;
}
.box2{
    position:absolute;
    width:20px;
    height:20px;
    top:0;
    right:0;
    background-color:blue;
}
p{
    position:relative;
    top:20px;
    left:0;
}
p:after{
    content: "";
    display:block;
}