title: How to move nested divs containers to the left if content increases
body: <p>I have a div that has a dropdown menu and a label with a button on it.like follows</p>
  
  <pre><code>&lt;div class="container "&gt;
    &lt;div id="User"&gt;
      &lt;div id="BtnUser"&gt;
        &lt;div id="dropMe"&gt;
          &lt;div class="dropdown"&gt;
            &lt;a onclick="UserdropDownDetails()"&gt;
              &lt;div class="triangle"&gt;&lt;/div&gt;
            &lt;/a&gt;
            &lt;div id="myDropdown" class="dropdown-content "&gt;
              &lt;ul&gt;
                &lt;span class="dropDownMenu"&gt;hello &lt;span class="ColonGreen"&gt;:&lt;/span&gt;&amp;nbsp;hi&lt;/span&gt;
                &lt;span class="dropDownMenu Availability"&gt;Availablility &lt;span class="ColonGreen"&gt;:&lt;/span&gt;&lt;/span&gt;
                &lt;span class="dropDownMenu"&gt;helloooo &lt;span class="ColonGreen"&gt;:&lt;/span&gt;&lt;/span&gt;
  
              &lt;/ul&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id=UserDetails&gt;&lt;label&gt;tessssttt&amp;nbsp;tessssssssssst&lt;/label&gt;&lt;/div&gt;
        &lt;div id="logoutDiv"&gt;&lt;button id="btnLogout" name="btnLogout"&gt;Log out&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/g9tdcrxh/2/" rel="nofollow noreferrer">https://jsfiddle.net/g9tdcrxh/2/</a></p>
  
  <p>The problem I am having is when the text <code>tessssst</code> grows it moves to the left which I want.but it's blocking the <code>triangle</code> dropdown. How do I get the <code>BtnUser</code> div to expand and the triangle to move left when the text grows?</p>
  
  <p>This is what it's doing</p>
  
  <p><a href="https://i.stack.imgur.com/Wtlxz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wtlxz.png" alt="enter image description here"></a></p>
  
  <p>I need the position of the triangle to stay where it is, only when the text grows then can it move. The logout button should also stay where it is.</p>
  
  <p>I want it to grow like this</p>
  
  <p><a href="https://i.stack.imgur.com/TFT89.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TFT89.png" alt="enter image description here"></a></p>
  
  <p>What am I doing wrong? Your guidance will be highly appreciated, can you do it in jQuery?</p>