JSFiddle - React, Tailwind, and code Playground

by kidino

HTML

<ul id="order-list">
    <li>
        <div class="pp-order">
        <div class="product-name">Product Name Here</div> 
        <div class="product-order-details" >
            <span><input type="text" class="product-order-qty"/></span>
            <span><select class="product-order-size">
                <option>XS</option>
                <option>S</option>
                <option>M</option>
                <option>L</option>
                <option>XL</option>
                <option>XXL</option>
            </select></span>
            <span class="product-order-price">fjsd</span>
            <span class="product-order-total">kldsa</span>
        </div>
        </div>
        <div class="product-info">
            jlas dfjlsd fjsd kldsa jlas dfjlsd fjsd kldsa jlas dfjlsd fjsd kldsa jlas dfjlsd fjsd kldsa jlas dfjlsd fjsd kldsjlsd fjsd kldsa jla</div>
        </li>
    <li>kldsafjlaskdfjlsdkfjsd</li>
    <li>kldsafjlaskdfjlsdkfjsd</li>
    <li>kldsafjlaskdfjlsdkfjsd</li>
    <li>kldsafjlaskdfjlsdkfjsd</li>
    <li>kldsafjlaskdfjlsdkfjsd</li>
</ul>

CSS

* { font-family: Arial; }

ul#order-list {
    list-style-type: none;
    border-top: 1px solid #ccc;
    margin: 0px; padding: 0px;
    display: block;
    overflow: hidden;
}

ul#order-list li {
    margin: 0px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    height: 20px;
    font-size: 15px;
    overflow: hidden;
}

.product-order-details {
    width: 300px; float: right; margin: 0px; padding: 0px;
}

.product-name { width: 250px; float: left;  }

.product-order-qty { width: 50px; margin: 0px; padding: 0px;  }

.product-order-price { margin: 0px; padding: 0px; width:100px; text-align: center; display: inline-block; }
.product-order-total { margin: 0px; padding: 0px;width:100px; text-align: center; display: inline-block; }

.pp-order { overflow: hidden; }
.product-info { margin-top: 10px; }

JavaScript

$('ul#order-list li').toggle(
        function(){ $(this).animate({ height: '100px' },400); },
        function(){ $(this).animate({ height: '25px' },400); }
    );