title: Cannot align a portion of text in a UI Tooltip?
body: <p>I have a Jquery UI Tooltip which has multiple rows of data.  Each row has 2 separate pieces of information that I want to align separately to format nicely.  The name on the left side I want to align left, while the data associated with the name I want to align to the right.</p>
  
  <p>I have tried all sorts of ways to align, with no success.</p>
  
  <p>I read that I can use the <code>ui-tooltip-content</code> css class <a href="https://api.jqueryui.com/tooltip/#option-classes" rel="nofollow noreferrer">https://api.jqueryui.com/tooltip/#option-classes</a></p>
  
  <p>to manipulate the content, which works successfully if I am manipulating the entire content itself; however I am trying to manipulate a span tag within the content.</p>
  
  <p>By doing </p>
  
  <pre><code>  .ui-tooltip-content .right
    {
  
        color:blue;
    }
  </code></pre>
  
  <p>I am successfully able to change only that text blue; however if I try</p>
  
  <pre><code> text-align: end;
    text-align-last: end;
    align-content: flex-end;
    align-items: flex-end;
    align-self: flex-end;
  </code></pre>
  
  <p>(I tried "right,""flex-end, and "end").</p>
  
  <p>none of them seem to work</p>
  
  <p>I am curious if anyone has any idea on how I may be able to align my text properly so that I wont have an issue?  In reality I can just leave the default <code>text-align: left;</code> for the main content, but I just need to find out how to right align the right portion of the text.</p>
  
  <p>Thank you for any help</p>