title: creating simple tag cloud in css
body: <p>I am trying to create tag cloud in css.</p>
  
  <p>For example If i have 5 links <code>(&lt;a href)</code> in same line , I want one to appear little up and another link little down , but in same line.I tried <code>padding-top:20px</code> and <code>display:block</code> but its making the link move to next line.</p>
  
  <p><img src="https://i.stack.imgur.com/uxWzv.png" alt="enter image description here"></p>
  
  <pre><code> &lt;style&gt;
      .cloud
      {
      height:200px;
      }
      .cloud1
      {
      font-size:26px; 
      margin-top:2px;
      }
      .cloud2
      {
      font-size:18px; 
      margin-top:5px;
      }
      &lt;/style&gt;
  
  
  
  
     &lt;div class="cloud"&gt;
       &lt;a class="cloud1" target="_blank" href=""&gt;Movie&lt;/a&gt; &lt;/span&gt;
       &lt;a class="cloud2" target="_blank" href=""&gt;news&lt;/a&gt; &lt;/span&gt;
       &lt;a class="cloud2" target="_blank" href=""&gt;Movie&lt;/a&gt; &lt;/span&gt;
       &lt;a class="cloud1" target="_blank" href=""&gt;123&lt;/a&gt; &lt;/span&gt;
      &lt;br&gt;
       &lt;a class="cloud1" target="_blank" href=""&gt;rand&lt;/a&gt; &lt;/span&gt;
       &lt;a class="cloud2" target="_blank" href=""&gt;news&lt;/a&gt; &lt;/span&gt;
       &lt;a class="cloud2" target="_blank" href=""&gt;Movie&lt;/a&gt; &lt;/span&gt;
       &lt;a class="cloud1" target="_blank" href=""&gt;ok&lt;/a&gt; &lt;/span&gt;
  
       &lt;/div&gt;
  </code></pre>
  
  <p>Here is <a href="http://jsfiddle.net/fznjydyd/" rel="nofollow noreferrer">http://jsfiddle.net/fznjydyd/</a> to play.I tried various things in display,position,margin,padding .But nothing seems to help me.</p>