JSFiddle - React, Tailwind, and code Playground

HTML

<div class=""container>
    <div class="product">Product1</div>
    <div class="desc">Some description1</div>
    <div class="product">Product2</div>
    <div class="desc">Some description2</div>
    <div class="product">Product3</div>
    <div class="desc">Some description3</div>
    <div class="product">Product4</div>
    <div class="desc">Some description4</div>
    <div class="product">Product5</div>
    <div class="desc">Some description5</div>
    <div class="product">Product6</div>
    <div class="desc">Some description6</div>
</div>

CSS

* {margin:0; padding:0;}

.container {
    width: 100%;
}

.product, .desc {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 30%;
    height: 200px;
    background-color: bisque;
    padding: 10px;
    border: 2px solid #fff;
}

.desc {
    display: none;
    width: 60%;
    background-color: #EBEBEB;
}

JavaScript

$(function() {
    $('.product').click(function() {
        $('.desc').hide();
        $(this).next().css('display', 'inline-block');
    });
});