I need help positioning the caret to the right so that it remains in place when I select an option.
$('#dropdownMenu span').on('click', function() {
$('#dropdownMenuButton').html($(this).text());
});#dropdownMenuButton {
border: solid 1px black;
background-color: white;
box-shadow: none;
width: 30vw;
text-align:left;
}
#dropdownMenu {
height: 50vh;
overflow: hidden;
overflow-y: auto;
transform: translate3d(0px, 38px, 0px)!important;
width: 30vw;
}<!DOCTYPE html>
<html>
<head>
<title>bootstrap dropdown</title>
<link rel="stylesheet" href="https://www.sailwbob.com/bootstrap/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select boats
</button>
<div id='dropdownMenu' class="dropdown-menu" >
<span class='dropdown-item'>Avrora</span>
<span class='dropdown-item'>Irlbach</span>
<span class='dropdown-item'>Laura</span>
(more boat options...)
</div>
</div>
<script src="https://www.sailwbob.com/bootstrap/jquery-3.3.1.slim.min.js"></script>
<script src="https://www.sailwbob.com/bootstrap/bootstrap.bundle.min.js"></script>
</body>
</html>