JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ingredients-container alpha-t">
    <div class="ingredient" id="fenugreek-extract">
        <div class="restrict-container small-info">
            <div class="icon">
                <img src="http://placehold.it/52" />
            </div>
            <div class="compound">Fenugreek Extract</div>
            <div class="weight">300mg</div>
        </div>
        <div class="large-info">
            <div class="restrict-container">
                <div class="compound-title">Fenugreek Extract</div>
                <div class="compound-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quis minima iure earum, harum eligendi, ipsam explicabo, nostrum dolor nulla velit incidunt quisquam quas! Rem modi, eveniet minus ut sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae porro tenetur veniam omnis quos qui voluptatem vel. Magnam sequi, vitae laudantium velit, sit voluptates saepe laborum a aut eligendi in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis a quia fugiat dolores, soluta sed at, quisquam, eveniet blanditiis, magnam optio earum facere minus consequuntur eum quidem perspiciatis. Perferendis, quis!</div>
                <div class="compound-weight">300mg</div>
            </div>
        </div>
    </div>
    <div class="ingredient" id="tribulus-terrestris">
        <div class="restrict-container small-info">
            <div class="icon">
                <img src="http://placehold.it/52" />
            </div>
            <div class="compound">Tribulus Terrestris</div>
            <div class="weight">300mg</div>
        </div>
        <div class="large-info">
            <div class="restrict-container">
                <div class="compound-title">Tribulus Terrestris</div>
                <div class="compound-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit corporis ut nemo eaque consequatur similique accusantium hic delectus consectetur. Voluptas, veniam rem!...

SCSS

* {
    margin: 0px;
    padding: 0px;
    font-family:"Lato", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
html, body {
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}
body {
    background: #ff0000;
}
.ingredients-container .ingredient {
    cursor: pointer;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    text-align: center;
    color: #fff;
    padding: 5px 0;
    -webkit-transition: height ease 0.3s;
    -moz-transition: height ease 0.3s;
    -ms-transition: height ease 0.3s;
    -o-transition: height ease 0.3s;
    transition: height ease 0.3s;
    overflow: hidden;
    position: relative;
}
.ingredients-container .ingredient:nth-of-type(1) {
    border-top: 2px solid rgba(0, 0, 0, 0.3);
}
.ingredients-container .ingredient .small-info {
    position: relative;
    z-index: 0;
    opacity: 1;
    height: 116px;
    -webkit-transition: opacity 0.5s ease, height ease 0.1s;
    -moz-transition: opacity 0.5s ease, height ease 0.1s;
    -ms-transition: opacity 0.5s ease, height ease 0.1s;
    -o-transition: opacity 0.5s ease, height ease 0.1s;
    transition: opacity 0.5s ease, height ease 0.1s;
}
.ingredients-container .ingredient .small-info.inactive {
    opacity: 0;
    height: 0;
}
.ingredients-container .ingredient .small-info .icon {
    width: 52px;
    height: 52px;
    display: inline-block;
}
.ingredients-container .ingredient .small-info .icon img {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.ingredients-container .ingredient .small-info .compound {
    font-family:"TradeGothicLTPro-BdCn20", Helvetica, Arial, sans-serif;
   ...

JavaScript

$('.ingredient').on('click', function () {
    if ($(this).hasClass('active')) return false;
    $('.ingredient').removeClass('active');
    $('.small-info').removeClass('inactive');
    $('.large-info').removeClass('large-info_show');
    $(this).addClass('active');
    var largeInfo = $(this).children('.large-info');
    var smallInfo = $(this).children('.small-info');
    largeInfo.addClass('large-info_show');
    smallInfo.addClass('inactive');
    setTimeout(function() {
        window.scrollTo(0, largeInfo.offset().top + smallInfo.height());
    }, 500);
    console.log(smallInfo.height);
});