JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<ul>
    <li><div class="block"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt, leo sed hendrerit semper, velit mauris semper ipsum, vel dictum magna augue sed ante. Quisque placerat ipsum lobortis, imperdiet enim et, dignissim nulla.</p></li>
     <li><div class="block"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt, leo sed hendrerit semper, velit mauris semper ipsum, vel dictum magna augue sed ante. Quisque placerat ipsum lobortis, imperdiet enim et, dignissim nulla.</p></li>
     <li><div class="block"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt, leo sed hendrerit semper, velit mauris semper ipsum, vel dictum magna augue sed ante. Quisque placerat ipsum lobortis, imperdiet enim et, dignissim nulla.</p></li>
</ul>

CSS

ul{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 500px;
    position: relative;
}

ul li{
    overflow: hidden;
}

.block{
    width: 20px;
    height: 20px;
    margin-right: 20px;
    background: green;
    float: left;
}

.block:after {
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  border: 1px solid red;
  top: 0;
  left: 10px;
}


li:last-child{
    color:red;
}

li:last-child .block:after {
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  border: 1px solid green;
  top: 0;
  left: 10px;
}

p{
    float: left;
    width: 460px;
    margin: 0 0 50px;    
}