how to create row in angular js? <p>I am trying to make a row which is displayed in image .Actually my circle is not on right side and my “P” is not getting background color.Here is my code <a href="http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=preview" rel="nofollow">http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=preview</a> </p> <p>can we give row height in percentage ? actually I need my row should look like as shown in image</p> <pre><code>![&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt; &lt;title&gt;Ionic Swipe Down&lt;/title&gt; &lt;link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"&gt; &lt;script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"&gt;&lt;/script&gt; &lt;script src="http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5"&gt;&lt;/script&gt; &lt;/head&gt; &lt;style&gt; .brd { border: 1px solid red; } &lt;/style&gt; &lt;body ng-app=""&gt; &lt;div class="list card"&gt; &lt;div class="item item-avatar"&gt; &lt;div style="border: 1px solid red;float: left;background: gray;"&gt;P &lt;/div&gt; &lt;h2&gt;16000389&lt;/h2&gt; &lt;p&gt;RutherFord &amp; Alfanso Company Lmt&lt;/p&gt; &lt;div style="border: 1px solid black;float: left;background: green;border-radius: 100%;width: 50px;height: 50px"&gt;650&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>