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

/* 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;
}

JavaScript

$(document).ready(function () {
    $('#products').on('click', 'li', function () {
    $(this).toggleClass("open");
  
          if("open" === $(this).attr("class")) {
            if($(this).before())
              $(this).before($(this).next());
              else
              $(this).after($(this));
        }
        
        if("right" === $(this).css("float") ) {
        $(this).after($(this).prev());
    }      
    });
	});