JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="itemListFull">
<div class="legend cf">
    <span class="legendQty">Qty.</span>
     <span class="legendDesc">Description</span>
     <span class="legendPartNum">Part #</span>
     <span class="legendEa">Per Item</span>
     <span class="legendTotal">Total</span>
</div>    
            <ul class="cf">
                <li class="cf">
                    <span class="itemQty">156</span>
                <span class="itemDesc">156</span>
                <span class="itemPartNum">156</span>
                <span class="itemEa">156</span><span class="itemTotal">156</span>
                <span class="itemRemove">remove</span>
                </li>
            </ul>
    
</div>

CSS

.itemListFull {
    width:100%;
}
.itemListFull .legend {
      -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    box-shadow:inset 0px 1px 0px 0px #54a3f7;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
    background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
    padding:5px 0;
    border-radius:10px 10px 0 0;
    color:white;
    font-weight:bold;
}
.itemListFull .legend span {
    display:inline-block;
    text-align:center;
    border-collapse:collapse;
    border-right:1px solid #333;
}
.itemListFull .legendQty {width:10%;}
.itemListFull .legendDesc {width:42%}
.itemListFull .legendPartNum {width:12%}
.itemListFull .legendEa {width:12%}
.itemListFull .legendTotal {width:12%;}

.itemListFull ul li span {
    display:inline-block;
    text-align:center;
    padding:0;
    border-collapse:collapse;
    border-right:1px solid #e3e3e3;
}

.itemListFull ul li {
    width:100%; margin:0;
    padding:0;
}
.itemListFull ul {
    padding:0;
    margin:0;
    width:100%;
    display:block;
        padding:5px 0px;
}
.itemListFull .itemQty {width:10%;}
.itemListFull .itemDesc {width:42%}
.itemListFull .itemPartNum {width:12%}
.itemListFull .itemEa {width:12%}
.itemListFull .itemTotal {width:12%;}
.itemListFull .itemRemove {width:%;font-size:80%;float:right;padding:0 5px;border:none !important}
.itemListFull .itemRemove:hover {color:red;}