JSFiddle - React, Tailwind, and code Playground

by johnc_22

HTML

<div class="column">
    <div class="cptItem">
        <div class="cptHeader">
            <div class="cptHeaderElement"><input type="text" value="45" class="cptItemCount" /></div>
            <div class="cptHeaderElement"><img src="http://www.iconarchive.com/favicon.ico" alt="" class="cptAdd" /></div>
            <div class="cptHeaderElement cptDescription">Paracentesis abdominal/peritoneal lavage (diagnostic Or Therapeutic); With Imaging Guidance</div>
            <div style="clear:both;"></div>
        </div>
    </div>
</div>

CSS

.column
{
    width:33%;
}

.cptItem
{
    border:solid 1px #CCCCCC;
}

.itemEven
{
    background-color:#FFFFFF;
}

.itemOdd
{
    background-color:#F8F8F8;
}

.itemActive
{
    background-color:#D7F4DB;
}

.cptHeader
{
    border-bottom:solid 1px #CCCCCC;
    font-weight:400;
    font-size:13px;
    font-style:normal;
    color:#333333;
}

.cptHeaderElement
{
    vertical-align:middle;
    float:left;
    margin:0 2px;
}

.itemActive .cptHeader
{
    border:none;
}

.cptItemCount
{
    width:25px;
}

.cptAdd
{
    cursor:pointer;
    height:16px;
    width:16px;
    vertical-align:middle;
}

.cptSubtract
{
    cursor:pointer;
}

.cptDescription
{
    white-space:normal;
}