JSFiddle - React, Tailwind, and code Playground

by scobban

HTML

<ol class="unstyled" id="active_items">
    <li class="finder-product clearfix">
        <header class="product-header clearfix">
            <h4 class="product-name">Pro Basic</h4>
            <div class="product-purchase clearfix">
                <span class="product-price">
                    <strong class="strong">$269.99</strong>
                    <span>per year</span>
                </span>
                <a href="#" class="btn btn-primary">Buy</a>
            </div>
        </header>
        <div class="product-features clearfix">
            <ul>
                <li>Multiple computers per subscription</li>
                <li>PCs and MACs are supported</li>
                <li>EHD supported</li>
                <li>NAS devices supported</li>
                <li>Courier recovery</li>
                <li>HIPAA-compliant</li>
                <li>Up to 250GB of backup</li>
            </ul>
        </div>
    </li>
    <li class="finder-product clearfix">
        <header class="product-header clearfix">
            <h4 class="product-name">Pro Plus</h4>
            <div class="product-purchase clearfix">
                <span class="product-price">
                    <strong class="strong">$499.99</strong>
                    <span>per year</span>
                </span>
                <a href="#" class="btn btn-primary">Buy</a>
            </div>
        </header>
        <div class="product-features clearfix">
            <ul>
                <li>Multiple computers per subscription</li>
                <li>PCs and MACs are supported</li>
                <li>Windows file servers</li>
                <li>EHD supported</li>
                <li>NAS devices supported</li>
                <li>Courier recovery</li>
                <li>HIPAA-compliant</li>
                <li>Up to 250GB of backup</li>
            </ul>
        </div>
    </li>
    <li class="finder-product clearfix">
        <header class="product-header clearfix">
            <h4...

CSS

.unstyled {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.finder-product {
    /* background-color: #efefef; */
    border: 1px solid #000;
    margin-bottom: 15px;
    padding: 10px;
}
.finder-product .product-pricing,
.finder-product .product-button {
    float: right;
}
.finder-product .product-summary {
    margin-top: 10px;
}
.finder-product .summary-toggle {
    margin-top: 15px;
    display: block;
}
.product-features {
    min-height: 125px;
    margin: 10px 0;
}
.product-features ul {
    width: 49%;
    float: left;
    padding-left: 20px;
}
.product-features li {
    /* background-color: #ccc; */
    /* border: 1px solid #000; */
    padding: 2px;
    margin: 3px 0;
}

.product-header {
    /* background-color: #f1f1f1; */
}
.product-name {
    float: left;
    padding: 0;
    margin: 8px 0 0;
    font-size: 21px;
    font-family: 'carbonitebold';
}
.product-price {
    position: relative;
    top: -4px;
    right: 7px;
}
.product-price span {
    position: absolute;
    text-align: right;
    top: 17px;
    right: 5px;
    font-size: 12px;
    width: 150px;
}
.product-price strong {
    font-size: 18px;
}
.product-purchase {
    float: right;
}
.product-purchase .btn {
    background-color: gray;
}
.product-features ul {
    float: left;
    width: 49%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.product-features ul + ul {
    float: right;
    width: 49%;
}

JavaScript

$.each($(".finder-product"), function(index, finder){
    
    var that = $(finder);
    
    var prodWrap = that.children(".product-features")
    var prodList = prodWrap.children("ul:first-child");
    var prodItem = prodList.children("li");
    
    var prodItem4plus = prodList.children("li:gt(4)");
    
    if (prodItem.length > 5) {
        prodWrap.append("<ul id='" + index + "' class='right-col'/>");
        prodItem4plus.appendTo("#" + index + ".right-col");
    };
    
});