title: CSS right align being pushed to new line
body: <p>I have a textbox that shows different values depending on the mouseover, I'd like the Name to be left aligned, and the corresponding value to the right aligned. I have the code close, but the tooltip is pushing the right-aligned text to a new line. Here is the CSS and the JS string variable, is there something off here?</p>
  
  <pre><code>.toolTip {
      font-family: arial;
      position: absolute;
      padding-left: 10px;
      padding-right: 10px;
      height: 130px;
      width: 390px;
      border: 1px solid #6F257F;
      text-align: left;
      display: none;
  }  
  
  .toolTip p.left {
      text-align: left;
      font-weight: bold;
  }
  
  .toolTip p.right {
      text-align: right;
  }
  
  var string = "&lt;p class = 'left'&gt;90-Day Actual Margin:  &lt;/p&gt;" + "&lt;p class = 'right'&gt;12345&lt;/p&gt;"
  </code></pre>
  
  <p>Here's a screenshot of what it currently looks like. 
  <a href="https://i.stack.imgur.com/koXvx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/koXvx.png" alt="tooltip"></a></p>