JSFiddle - React, Tailwind, and code Playground

by Cristian Trifan

HTML

<div id="container">
    <div class="itemContainer">
        <div class="item"><button class="expander">+</button>Expand me and it looks good</div>
        <div class="item"><button class="expander">+</button>A</div>
        <div class="item"><button class="expander">+</button>C</div>
        <div class="item"><button class="expander">+</button>E</div>
        <div class="item"><button class="expander">+</button>G</div>
    </div>
    <div class="itemContainer">
        <div class="item"><button class="expander">+</button>Expand only me and I waste so much space!</div>
        <div class="item"><button class="expander">+</button>B</div>
        <div class="item"><button class="expander">+</button>D</div>
        <div class="item"><button class="expander">+</button>F</div>
        <div class="item"><button class="expander">+</button>H</div>
    </div>
</div>

CSS

.itemContainer {
    width: 48%;
    float:left;
}
.item {
    height:30px;
    border:1px solid black;
    margin-left: 1%;
    margin-bottom:10px;
}

.expanded {
    height: 114px;
}

JavaScript

$('#container').on('click', '.expander', function(e) {
    var $this = $(this),
        $item = $this.parents('.item');

    $item.toggleClass('expanded');
});