title: Put <span> elements on same line of text
body: <p>I think this should be straight forward and i've read some other questions but none of the solutions are working.</p>
  
  <p>I'm modifying a mailing list template for a product listing to use on eBay - so its full of table-cells which aren't ideal but do work to a degree, though seem to be causing a problem.</p>
  
  <p>I have a  tag system with some javascript to show pop up information when you mouse over, this works fine but the CSS to align the span text is creating a new line for each span element when I want everything to be inline.</p>
  
  <p><a href="https://i.stack.imgur.com/XBCsG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XBCsG.jpg" alt="each bold element incorrectly starts a new line"></a></p>
  
  <p>As you can see in the image, each bold element starts a line break. I've removed the pop up span class that nestles inside to rule that out, but they still don't line up together, here is the CSS for the span tag</p>
  
  <pre><code>.tiptext {
  float:left;
  width: auto;
  display:inline-block;
  font-family: 'proxima_nova_rgbold', Helvetica; 
  text-decoration: underline;
  color: rgb(39, 44, 45); 
  font-size: 14px;
  cursor: help; 
  }
  </code></pre>
  
  <p>and here is the HTML where the span elements reside</p>
  
  <pre><code>&lt;tr&gt;
                                          &lt;td valign="top" width="100%" class="icons61"&gt;
  
                                              &lt;table width="61" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full"&gt;
                                                  &lt;tr&gt;
                                                      &lt;td width="100%" height="30" class="fullCenter" &gt;
                                                          &lt;a href="#" style="text-decoration: none;"&gt;&lt;img src="http://deecies.com/mac/icon-tutorial.png" width="61" height="auto" alt="" border="0"  class="hover" style="vertical-align: top;"&gt;&lt;/a&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/table&gt;
  
                                              &lt;table width="1" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full"&gt;
                                                  &lt;tr&gt;
                                                      &lt;td width="100%" height="20"&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/table&gt;
  
                                              &lt;table width="195" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full"&gt;
                                                  &lt;tr&gt;
                                                  &lt;td width="100%" height="30" style="text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 18px; color: rgb(239, 73, 53); line-height: 24px; font-weight: normal;" class="fullCenter"&gt;
                                                      &lt;p  cu-identify="element_05873407123144716"&gt;&lt;span style="color: rgb(239, 73, 53); font-family: proxima_novasemibold, Helvetica;"&gt;Tutorial PDFs &amp; Videos.&lt;/span&gt;&lt;br&gt;&lt;span style="font-family: 'proxima_nova_rgregular', Helvetica; font-weight: normal;"&gt;&lt;span style="color: rgb(39, 44, 45); font-size: 14px;"&gt;Not only will we hold your hand if you're a new Mac user, but we've also provided you with some premium award winning video and reading material for swapping from Windows to Mac and for new Mac users, including &lt;span class="tiptext"&gt;OS X Yosemite The Missing Manual,&lt;/span&gt; &lt;span class="tiptext"&gt;Switching to Mac The Missing Manual&lt;/span&gt;&amp; &lt;span class="tiptext"&gt;OS X Yosemite for Dummies&lt;/span&gt;in order to help make the transition from Windows to Mac easy and enjoyable.&lt;/span&gt;&lt;/span&gt;&lt;!--[if !mso]&gt;&lt;!--&gt;&lt;/p&gt;&lt;!--&lt;![endif]--&gt;
                                                  &lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/table&gt;
  
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td width="100%" height="30"&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
  
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;&lt;!-- End Wrapper 2 --&gt;
  
                  &lt;/td&gt;
              &lt;/tr&gt;
  </code></pre>
  
  <p>Most answers involve using display:inline-block and float:left to achieve the desired outcome, but as you can see both are within my CSS so maybe its something to do with the table etc.</p>