JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="bs-example">
    <div class="dropdown">
      <a id="dLabel" class="dropdown-toggle" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown trigger
        <span class="caret"></span>
      </a>
    
      <ul class="dropdown-menu" aria-labelledby="dLabel">
          <li>a</li>
          <li>b</li>
          <li>c</li>
          <li>d</li>
      </ul>
    </div>
</div>

CSS

.bs-example
{
    height: 80px;
    border:1px solid black;
    overflow:hidden;
}

.dropdown {
  position: inherit;
}

JavaScript

$(document).on("show.bs.dropdown", function () {
  var dropdownToggle = $(this).find(".dropdown-toggle");
  var dropdownMenu = $(this).find(".dropdown-menu");
  dropdownMenu.css({
    "top": (dropdownToggle.position().top + dropdownToggle.outerHeight()) + "px",
    "left": dropdownToggle.position().left + "px"
  });
});