I have a div containing a dropdown menu, label, and button as shown below:
<div class="container ">
<div id="User">
<div id="BtnUser">
<div id="dropMe">
<div class="dropdown">
<a onclick="UserdropDownDetails()">
<div class="triangle"></div>
</a>
<div id="myDropdown" class="dropdown-content ">
<ul>
<span class="dropDownMenu">hello <span class="ColonGreen">:</span> hi</span>
<span class="dropDownMenu Availability">Availablility <span class="ColonGreen">:</span></span>
<span class="dropDownMenu">helloooo <span class="ColonGreen">:</span></span>
</ul>
</div>
</div>
</div>
<div id=UserDetails><label>tessssttt tessssssssssst</label></div>
<div id="logoutDiv"><button id="btnLogout" name="btnLogout">Log out</button></div>
</div>
</div>
</div>
https://jsfiddle.net/g9tdcrxh/2/
Currently, when the text tessssst grows in length, it moves to the left and blocks the dropdown triangle. How can I expand the BtnUser div so that the triangle shifts accordingly when the text grows?
This is the current layout:
https://i.sstatic.net/Wtlxz.png
I want the triangle's position to remain fixed, only shifting when the text extends. The logout button should stay in place.
The desired expansion should look like this:
https://i.sstatic.net/TFT89.png
How can I achieve this functionality? Any help or guidance using jQuery would be highly appreciated.