title: Dynamic positioning of html elements - Asp.net
body: <p>During the work on my Asp.net project I came across the following problem:</p>
  
  <p>I have an html <code>&lt;span&gt;</code> located on html <code>&lt;table&gt;</code> that located in an <code>&lt;asp:Panel&gt;</code>, and I want that the position of the <code>&lt;span&gt;</code> in the table will be according its text. </p>
  
  <p>Explanation:</p>
  
  <p><a href="https://i.stack.imgur.com/Wsvcm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wsvcm.png" alt="enter image description here"></a></p>
  
  <p>The text shown in the yellow rectangle is the text of the <code>&lt;span&gt;</code> and the long red rectangle is the table that contains the <code>&lt;span&gt;</code>.</p>
  
  <p>The text of the <code>&lt;span&gt;</code> is changed by a button click, like in the following picture:</p>
  
  <p><a href="https://i.stack.imgur.com/XZOmn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XZOmn.png" alt="enter image description here"></a></p>
  
  <p>As we can see in the picture, the text on the <code>&lt;span&gt;</code> is changed, and now the text is longer than before, so I want the <code>&lt;span&gt;</code> to move right instead of became larger to the left direction, I mean: I want that when the text on the span is long then the <code>&lt;span&gt;</code> will move to the right.</p>
  
  <p>I know, in Windows Forms U can make something like that in less than a second, but in HTML and CSS, I can burn hours on the computer and still there is no solution.</p>
  
  <p>My HTML / CSS code:</p>
  
  <pre><code>&lt;form id="mainForm" runat="server"&gt;
      &lt;asp:Panel ID="main" runat="server" CssClass="main-style"&gt; 
          &lt;table id="details" style="position: relative; width: 95vw; height: 26px; margin-left: auto; margin-right: auto; margin-top: 30px"&gt;
              &lt;tr&gt; 
                  &lt;td style="border: solid red 1px;"&gt;
                      &lt;span id="userNameLabel" runat="server" style="color: powderblue;" class="username-label-style"&gt;XXXXX&lt;/span&gt;
                  &lt;/td&gt; 
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;style&gt;           
          THE PANEL STYLE HERE - NOT IMPORTANT NOW.
          .username-label-style { 
              background: Transparent;                
              top: 0px;
              float: right;
              margin-right: 0;
              width: 100px;
              height: 26px;
              font-family: Arial;
              font-size: large;
          }
          &lt;/style&gt;
      &lt;/asp:Panel&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I tried by using the <code>margin-right</code> property, but nothing. Any suggestions?</p>