JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="contact-list">
        <li ng-repeat="contact in contacts | filter: filterContacts | orderBy: '-isOnline': false" ng-controller="contactItemController" ng-dblclick="chatWithUser(contact)" ng-click="contactItemClick($event)">
          	            
          <div class="name">{{ contact.username }} and we are going to make this really really really really really really really really long make this really really really really really really really really long longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer longer</div>

          <ul class="contact-dropdown">
            <span class="tail"></span>
            <button ng-click="chatWithUser(contact)" ng-disabled="!isChatAvailableForTheContact(contact)">{{ !contact.isOnline ? 'Leave a' : 'Instant' }} Message</button>
            <button ng-click="callUser(contact)" ng-disabled="!isCallAvailableForTheContact(contact)">Video Call</button>
            <!-- <li ng-click="addParticipant(contact)" ng-disabled="!isContactAvailableToAddToConversation(contact)"><a href="#">Add Participant</a></li> -->
            <!-- Invite to Conference should only be shown if currently in a video call -->
            <button ng-click="inviteToConference(contact)" ng-disabled="!isContactAbleToJoinTo_Conference(contact)">Invite to Conference</button>
            <button ng-click="removeContact(contact)" ng-controller="removeContactModalController">Remove from Contacts</button>
          </ul>
        </li>
                          
     ...

CSS

#contact-list {
  width: 150px;
  float:right;
  padding: 0;
  margin: 0;
  max-height: 300px;
  /*overflow-y: auto;*/

}
#contact-list .name{
    width: 150px;
    max-height: 300px;
    overflow: auto;
}
#contact-list li {
  border-top: 1px solid #EBEBEB;
  list-style: none;
  padding: 3px 0;
  font-size: 14px;
  height: 38px;
  cursor: pointer;
  position: relative;
}
#contact-list li:hover {
  background-color: #EBEBEB;
}
#contact-list li .contact-dropdown {
    display:none;
  /*overflow: hidden;*/
  z-index: 10;
  background-color: #ffffff;
  border: 1px solid #BDBDBD;
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  margin-left: -100px;
  padding: 0;
  text-align: center;
  border-radius: 5px;
}
#contact-list li .contact-dropdown button {
  width: 100%;
  color: #0077CC;
  background: none;
  border: none;
  cursor: pointer;
  list-style: none;
  padding: 5px 0px;
  height: auto;
  font-size: 12px;
}
#contact-list li .contact-dropdown button:hover {
  background-color: #EBEBEB;
}
#contact-list li .contact-dropdown button:disabled {
  color: gray;
}
#contact-list li .contact-dropdown .tail {
  width: 10px;
  height: 22px;
  display: block;
  top: 6px;
  right: -10px;
  position: absolute;
}
#contact-list li .name {
  padding: 5px 0;
  float: left;
}

JavaScript

$('#contact-list li').on('click', function () {
   console.log('hey'); 
    $('.contact-dropdown').toggle();
});