I am struggling to create a row as shown in the image. Currently, my circle is not positioned on the right side and my "P" element is not receiving the background color. Here is the code snippet: http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=preview
Is it possible to set the row height in percentage? I want my row to resemble the design displayed in the image.
![<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Swipe Down</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5"></script>
</head>
<style>
.brd {
border: 1px solid red;
}
</style>
<body ng-app="">
<div class="list card">
<div class="item item-avatar">
<div style="border: 1px solid red;float: left;background: gray;">P </div>
<h2>16000389</h2>
<p>RutherFord & Alfanso Company Lmt</p>
<div style="border: 1px solid black;float: left;background: green;border-radius: 100%;width: 50px;height: 50px">650</div>
</div>
</div>
</body>
</html>