icon and text in next line
<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>