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: 5px;
	border: 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")
    });
	});