JSFiddle - React, Tailwind, and code Playground

by mlsteeves

HTML

<div>
<div class="statement brdr-tp brdr-lft brdr-rgt">
    <div class="wbs">1</div>
    <div class="icon brdr-lft">icon</div>
    <div class="contents brdr-lft">Statements contents that<br/>
        wrap<br/>
        several lines</br>
    make stuff to the left </br>
harder to have vertical lines</br>
        
        
    </div>
</div>
<div class="statement brdr-tp brdr-lft brdr-rgt">
    <div class="wbs">1</div>
    <div class="icon brdr-lft">icon</div>
    <div class="contents brdr-lft">Statements contents that<br/>
        wrap<br/>
        several lines</br>
    make stuff to the left </br>
harder to have vertical lines</br>
        
        
    </div>
</div>
</div>

CSS

.brdr-tp {
    border-top: 1px solid  #A0A494;
}
.brdr-lft {
    border-left: 1px solid  #A0A494;
}
.brdr-rgt {
    border-right: 1px solid  #A0A494;
}
.statement{
    width: 100%;
    display:table;
    clear: both;
}
.wbs{
    width: 50px;
}
.wbs, .icon, .contents{
    display: table-cell;
}
.icon{
    width: 30px;  
}
.contents{
}