JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="products">
    <li>product 1</li>
    <li>product 2</li>
    <li>product 3</li>
    <li class="column-2 up">product 4</li>
    <li class="column-2">product 5</li>
    <li class="column-2">product 6</li>
    <li>product 1</li>
    <li>product 2</li>
    <li>product 3</li>
    <li class="column-2 up">product 4</li>
    <li class="column-2">product 5</li>
    <li class="column-2">product 6</li>
    <li>product 1</li>
    <li>product 2</li>
    <li>product 3</li>
    <li class="column-2 up">product 4</li>
    <li class="column-2">product 5</li>
    <li class="column-2">product 6</li>
    <a href="#" id="show-more">Show more &raquo;</a>
</ul>

CSS

#products {
    width: 100px; /* Width of one column */
    border: 1px solid;
    list-style-type: none;
    margin: 0;
    padding: 5px;
    overflow: hidden; /* Hide offset list items */
    float: right;
}

#products.open {
    width: 200px; /* Width of however many columns you need to show */
}

#products li {
    width: 100px; /* Here you specify the width of a column */
    margin: 0;
    padding: 0 5px;
    height: 20px; /* We use equal height here, you will want to change this and calculate the height of each column with JavaScript */
}

#products li.column-2.up {
    margin-top: -60px; /* You should do this with JavaScript in production as you can't guarantee the height depending on your content's length */
}

#products li.column-2 {
    margin-left: 100px; /* (Column width X (Column number - 1)); */
}

#show-more {
    display: block;
    padding: 5px;
    text-align: right;
}

JavaScript

var $products = $("#products");
var open = $products.hasClass("open");
$("#show-more").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (open) {
        $products.removeClass("open");
        this.innerHTML = "Show more &raquo;"
    } else {
        $products.addClass("open");
        this.innerHTML = "Close &otimes;";
    }
    open = !open;
});