title: Two div tags on the right side overriding each other
body: <p>There are two div tag. First one is display 20px from right side and another is displaying 103px from right and both are in the same row. </p>
  
  <p>some times both were getting overridden because of the text inside the div tags. the text will vary based on some option. its dynamic. sometimes it wont get overridden because the text size is low. </p>
  
  <p>i want the following scenarios to be done.</p>
  
  <p>first div tag's right would be 20 px. second div tag right's needs to be starts from the left edge of the first div tag. is this possible? can anyone help me?</p>
  
  <pre><code>        .second-button {
                  font-size: 14px;
                  color: #00aeef ;
                  position: absolute;
                  bottom: 22px;
                  right: 103px;
                  cursor: pointer;
              }
  
          .first-button {
                  position: absolute;
                  right: 20px;
                  bottom: 16px;
              }
  </code></pre>
  
  <p>The above style i am currently following. Based on that can any one give the solution?</p>