title: align icons with text
body: <p>What's the best way to align icons (left) and text (right) or the opposite text on left and icon on right?</p>
  
  <p>Does the icon image and text have to be the same size? Ideally I would like them to be different but be on the same vertical alignment.</p>
  
  <p>I am using background-position css property to get the icons from a larger image.</p>
  
  <p>Here is how I do it now, but I am struggling with either getting them to be on the same line or be vertically aligned to the bottom.</p>
  
  <p>
   Text </p>
  
  <p>This is what I get after I try your suggestions.</p>
  
  <p>Though the text is now aligned with the icon, it is superimposed over the icon to the right of the icon that I want. Please note that i am using the background position to show the icon from a larger set of images. </p>
  
  <p>Basically I am getting </p>
  
  <pre><code>&lt;icon&gt;&lt;10px&gt;&lt;text_and_unwanted_icon_to_the_right_under_it&gt;
  &lt;span class="group3_drops_icon group3_l_icon" style=""&gt;50&lt;/span&gt;
  
  group3_drops_icon {
  background-position:-50px -111px;
  }
  
  .group3_l_icon {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background:transparent url(/images/group3.png) no-repeat scroll left center;
  height:35px;
  overflow:hidden;
  padding-left:55px;
  }
  </code></pre>