JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="products">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

CSS

<style>
/* product css */
 #products {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#products li {
    display: inline;
    float: left;
    width: 335px;
    height: 200px;
    margin-bottom:10px;
    outline: 1px solid #eeeeee;
    cursor: hand;
    cursor: pointer;
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s;
    background-color: yellow;
}
#products li:nth-child(odd) {
    float: left;
}
#products li:nth-child(even) {
    float: right;
}
#products li:hover {
    box-shadow: 0px 0px 2px 2px #eeeeee;
}
#products li img {
    float: left;
    margin-right: 8px;
}
.open {
    width: 100% !important;
    transition: width 0.2s;
    -webkit-transition: width 0.2s;
}
</style>

JavaScript

$(document).ready(function () {
    $('#products').on('click', 'li', function () {
        $(this).toggleClass("open")
    });
});