JSFiddle - React, Tailwind, and code Playground

HTML

<div class="connections-label">
    <div class="connections-avatar"></div>
    <div class="connections-desc">
        <h3><a href="">Christian Blanquera</a></h3>
        <h4>Invested over 5 million cookies in 20 startups</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis dapibus interdum. Aliquam mollis cursus ultrices. Duis nisi velit, iaculis sit amet suscipit non, faucibus mattis neque. Maecenas ligula ipsum, iaculis non interdum sit amet, faucibus quis diam. Donec convallis viverra odio. Maecenas dapibus odio eget leo pharetra, id auctor felis porta. Vivamus sit amet auctor arcu. Nunc faucibus diam quis leo tincidunt, sed ultricies tellus bibendum. Nulla ultricies risus eu nibh posuere, ac convallis magna sollicitudin. Curabitur sollicitudin aliquet ligula, eget fringilla lectus eleifend sed. Sed vel felis odio.</p>
    </div>
</div>

<a href='#' class='toggleLink'>Toggle <code>overflow: hidden;</code> on <code>.connections-desc</code></a>

CSS

.connections-label {
    overflow: hidden;
    background: #e6e6e6;
    padding: 10px;
    border-radius: 5px;
}
.connections-avatar {
    width: 50px;
    height: 50px;
    float: left;
    background: url(http://lorempixel.com/g/50/50/people) no-repeat;
}
.connections-desc {
    padding-left: 10px;
    overflow: hidden;
}
.connections-desc h3, .connections-desc h4 {
    font-size: 1em;
    margin: 0;
}
.connections-desc p {
    margin: .8em 0 0;
}

/* Additional demo styles */
body {
    margin: 20px;
    font: 12px Arial, sans-serif;
}
.toggleLink {
    display: block;
    margin-top: .8em;
}

JavaScript

jQuery(function($) {
    var toggled = false;
    $(".toggleLink").click(function() {
        toggled = !toggled;
        $(".connections-desc").
          css("overflow", toggled ? "visible" : "hidden");
        return false;
    });
});