JSFiddle - React, Tailwind, and code Playground

by robdodson

HTML

<div class="notSoWide ">
 <div class="table">
    <div class="th">
                <div class="td">Row</div>
                <div class="td">Config Type</div>
                <div class="td" style="width: 100px;">Config Value</div>
                <div class="td">Is Include</div>

    <div style="clear: both;"></div>
   </div>
<div id='helper_gridview'>

                  
               <div class="tr">
                <div class="td">1</div>
                <div class="td">test</div>
                <div class="td">ac, cd, ef, gh, hi, jk, lm, no</div>
                <div class="td">1</div>

                            <div style="clear: both;"></div>
                </div>

CSS

.notSoWide {
 font-family: Tahoma, Arial;
 font-size: 0.8em;
 padding: 5px;
 background-color: #fff;
 border-right: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
 width: 400px;
 margin-bottom: 25px;
}
.table {
 width: 100%;
 border: 1px solid #f00;
}
.table .th {
 background-color: #f00;
 color: #fff;
 font-weight: bold;
 border-bottom: 1px dotted #f00;
}
.table .tr:nth-child(odd) {
 background-color: #eee;
}
.table .td {
 float: left;
 width: 10%;
/* padding-left: 2%; */
}