JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="informationCriteriaList"></div>

CSS

/* Information Criteria List */
 #informationCriteriaList {
    width: 100%;
    cursor: default;
    overflow: auto;
    height: calc(100% - 40px);
}
.informationCriteriaListItem {
    width: calc(100% - 2px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    height: 24px;
}
.listItem {
    height: 100%;
    float: left;
}
.listItemOuter {
    width: 15%;
}
.listItemInner {
    width: 70%;
    vertical-align: middle;
}
.listItemRoundElement {
    height: 70%;
    float: left;
    border-radius: 40px;
}
.listItemImage {
    background-color: rgba(71, 126, 209, 0.1);
}
.listItemName {
    float: left;
    margin-left: 10px;
}

.informationCriteriaListItem:nth-child(even){
     background-color: rgba(71, 126, 209, 0.1);
}
.listItemSelectButton {
    background-color: #B0DA4E;
    cursor: pointer;
}
.listItemSelectButton.active {
    background-color: #F34A58;
}
.addHoriontal {
    width: 40%;
    height: 10%;
    margin-top: 45%;
    margin-left: 30%;
    border-radius: 40px;
    background-color: white;
}
.addVertical {
    width: 10%;
    height: 40%;
    margin-top: -25%;
    margin-left: 45%;
    border-radius: 40px;
    background-color: white;
}
.addVertical.active {
    opacity: 0;
}

JavaScript

function createCriteriaListItem(name) {

    var listItemImage = "<div class='listItemRoundElement listItemImage'> </div>";
    var listItemOuterImage = "<div class='listItem listItemOuter'>" + listItemImage + "</div>";

    //List Item Name
    var listItemName = "<div class='listItemName'>" + name + "</div>";
    var lisItemInnerName = "<div class='listItem listItemInner'>" + listItemName + "</div>";

    //List Item Select Button
    var listItemSelectButtonAdd = "<div class='addHoriontal'> </div> <div class='addVertical'> </div>";
    var listItemSelectButton = "<div class='listItemRoundElement listItemSelectButton'>" + listItemSelectButtonAdd + "</div>";
    var listItemOuterSelectButton = "<div class='listItem listItemOuter'>" + listItemSelectButton + "</div>";

    //List Item 
    var informationCriteriaListItemContent = listItemOuterImage + lisItemInnerName + listItemOuterSelectButton;
    var informationCriteriaListItem = "<div id=" + name + " class='informationCriteriaListItem'>" + informationCriteriaListItemContent + " </div>";

    $("#informationCriteriaList").append(informationCriteriaListItem);
}

for (var i = 0; i < 20; i++) {
    createCriteriaListItem('name');
}