JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="dropup" id="translaters">
    <button class="btn btn-default dropdown-toggle" style="background-color: #538b42; color: white;" type="button" data-toggle="dropdown">Translate
        <div class="dropdown-menu" id="google_translate_element"></div>
        <script>
            function googleTranslateElementInit() {
                new google.translate.TranslateElement(
                    {pageLanguage: 'en'},
                    'google_translate_element'
                );
            }
        </script>
    </button>
        <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

JavaScript

$("#google_translate_element").click(function(e){
   e.stopPropagation();
});