JSFiddle - React, Tailwind, and code Playground

by GolezTrol

HTML

<ul>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non eros nec nulla iaculis pulvinar. Nam iaculis rhoncus pulvinar. Aenean interdum et eros vel molestie.</span></li>
    <li><span>In auctor id ante eu venenatis.</span></li>
    <li><span>Sed posuere pellentesque nunc vitae rhoncus. Duis at arcu vitae arcu mollis egestas. Pellentesque at euismod eros, at pulvinar arcu. Mauris eget eros interdum, rhoncus dolor quis, pharetra turpis. Duis vel ligula a nulla blandit eleifend. Nam blandit arcu libero. Curabitur condimentum tristique mi, sed vehicula nisl rhoncus a. Nullam nec tincidunt ligula. Sed non sollicitudin ante. Aliquam porta ligula vitae orci rhoncus, at ullamcorper odio adipiscing. Donec consequat sollicitudin mi sit amet aliquet. Mauris pretium magna at erat aliquet viverra.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non eros nec nulla iaculis pulvinar. Nam iaculis rhoncus pulvinar. Aenean interdum et eros vel molestie.</span></li>
    <ul>

CSS

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style:none;
    padding-top: 40px;
}

li {
    width: 50%;
    min-height: 40px;
    border: 1px solid blue;
    margin-top: -20px;
    position: relative;
}
li:after {
    display: block;
    position: absolute;
    top: 0;
    content: " ";
    width: 40px;
    height: 100%;
    border: 1px solid red;
}
li span {
    display: inline-block;
    padding: 0 40px;
}
li:nth-child(even) {
    float: right;
}
li:nth-child(odd) {
    float: left;
    text-align: right;
}
li:nth-child(even):after {
    left: -20px;
}
li:nth-child(odd):after {
    right: -20px;
}   
li:nth-child(even) span {
    padding-right: 0;
}
li:nth-child(odd) span {
    padding-left: 0;
}
li:first-child:after {
    border: 1px solid green;
}
}