JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<div class="rowHolder">
 <div class="tablecol1">
 <span class="bigtime">10</span>
 <span class="smalltime"> 00</span>
 </div>
 <div class="tablecol2">
 <div class="cleaner"></div>
 </div>
</div>

CSS

span { float: left; padding: 0 5px; border-left: 1px solid #000; }

.tablecol1{
    display:inline;
    width:17%;
    float:left;
    /*max-width: 40px;*/
    font-size:14pt;
    word-wrap: break-word
    background-color:#ffffff;
    padding-left:1%;
    }
.tablecol2{
    display:inline;

    width:80%;
    float:left;
    font-size:11pt;
    word-wrap: break-word;
    border-left:1px solid #000000;
            padding-left:1%;
    }   
.rowHolder{
    overflow:hidden;
    width:100%;
    border-top:solid 1px #000000;
    font-size:11pt;
    word-wrap: break-word;
    background-color:#fccfff;
    position:relative;
}
.cleaner {
    clear:both;
    height:1px;
    font-size:1px;
    border:none;
    margin:0; padding:0;
    background:transparent;
}

JavaScript

var a = ["a","b"];

for (int i = 0; var b = a[i++]; ){
        console.log(b.toUpperCase();
}