title: Need to align 2 icons (Email and Trash) present inside a span element to the right without using the CSS float: right property
body: <p>I have a list of contacts for each of which email and trash icons are being displayed. The email and trash icons need to be moved to the right of the element for all the contacts in the list. Below is the code snippet for the same:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span class="contactClktoXIcons extUsrIconsRtAlign"&gt;
      &lt;span class="emailIconPreSpan" ng-click="clickToEmail($event)"&gt;
          &lt;i class="indvEmailIcon" ng-mouseover="showIconTooltip($event)" data-original-title={{translation.topNav.clickToMail}} data-placement="bottom"&gt;&lt;/i&gt;
      &lt;/span&gt;
      &lt;span class="trashIconprespan"&gt;
          &lt;i class="trashIcon" ng-mouseover="showIconTooltip($event)" data-original-title={{translation.topNav.deleteContact}} data-placement="bottom"&gt;&lt;/i&gt;
      &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.contactClktoXIcons{
      display: none;
      top: 15px;
      position: relative;
      right: 2px;
  }
  li.contactData:hover .contactClktoXIcons{
      position: relative;
      top: -25px;
      display: inline-flex;
      width: 200px;
  }
  .trashIcon:after{
      content:"\e0d8";
  }
  .indvEmailIcon:after{
      content:"\7e";
  }
  .extUsrIconsRtAlign{
      width: 80px !important;
      height: 25px;
  }
  .emailIconPreSpan {
      margin-right: 10px;
      padding-right: 5px;
  }
  </code></pre>
  
  <p>Tried <code>extUsrIconsRtAlign</code> to move the email and trash icons to the right side of the <code>span</code> element width without using the <code>float:right</code> property as <code>float</code> would cause the data to overflow and the data of next contacts is getting disturbed.</p>
  
  <p>Please advise as to what needs to be done to fix this. Thanks.</p>