title: How do I float an image next to a paragraph properly?
body: <p>I have a part in my website where there is a column of icons with a paragraph next to them. Ive been searching the internet for a simple solution, but everything seems to either not work or messes up my webpage. This is the last thing I've tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#exw
  {
   width: 80px;
   height: 80px;
   float: left;
  }
  
  #exx
  {
   width: 80px;
   height: 80px;
   float: left;
  }
  
  #exy
  {
   width: 80px;
   height: 80px;
   float: left;
  }
  
  #floats
  {
   width: auto;
   float: right;
   margin-right: 530px;
   margin-top: 13px;
  
  }
  
  
  
  #floats img
  {
   margin-top: 22px;
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="floats"&gt; 
  &lt;p&gt;&lt;img id="exw" src="example.jpg"/&gt;
  &lt;p&gt;example&lt;/p&gt;
  
    &lt;p&gt;&lt;img id="exx" src="example.jpg"/&gt;
  &lt;p&gt;example&lt;/p&gt;
    
    &lt;p&gt;&lt;img id="exy" src="example.jpg"/&gt;
  &lt;p&gt;example&lt;/p&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm sure there is a ridiculously simple solution to my problem, but I can't figure it out. Anybody have an idea of what I did wrong? Thanks!</p>
  
  <p><strong>PS-</strong> I'm also sure there is an easier way to write the code I used (like "class" instead of separate id's for the icons). I'm working on that...</p>