title: icon and text in next line
body: <p>I have some icons with text like as shown below</p>
  
  <p><a href="http://jsfiddle.net/02fmv4Lb/" rel="nofollow noreferrer">Working JSFiddle</a></p>
  
  <pre><code>&lt;span class="text-center  m-sm"&gt;
    &lt;span class="fa fa-circle fa-1x"&gt;&lt;/span&gt;
    &lt;span class="font-bold no-margins"&gt;
      testdevice 1
    &lt;/span&gt;
  &lt;/span&gt;
  
  &lt;span class="text-center  m-sm"&gt;
    &lt;span class="fa fa-circle fa-1x"&gt;&lt;/span&gt;
    &lt;span class="font-bold no-margins"&gt;
      testdevice 2
    &lt;/span&gt;
  &lt;/span&gt;
  
  &lt;span class="text-center  m-sm"&gt;
    &lt;span class="fa fa-circle fa-1x"&gt;&lt;/span&gt;
    &lt;span class="font-bold no-margins"&gt;
      testdevice 3
    &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Can anyone please tell me how to make the icon and text in two rows like as shown below without using any specified width or height</p>
  
  <p><a href="https://i.stack.imgur.com/hsz40.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hsz40.png" alt="enter image description here"></a></p>