why P tag not taking whole height of row?

could you please tell me why why P tag not taking whole height of row ?Actually I have p tag in my row in which the text is “P” only having background color light blue .It is not taking whole height of row as shown in image ? I will try to explain more in other words .

  • I am trying to make a row as shown in image .it have “P” text in image “left” one .It is not taking whole height of row as shown in image
  • I have one circle on right side it is having some text inside “650” it .it is not displaying on centre why ?

plunker

http://plnkr.co/edit/ilmNaeyjFZCcSnb2PWcO?p=preview

.bg {
    background: lightgray;
    position: relative;
}
.ptag {
    position: absolute;
    margin-left: -7%;
    width: 7%;
    border: 1px solid red;
    height: 100%;
    background: lightblue;
    color: white;
}
.circle{
    width: 50px;
    height: 50px;
    float: right;
    border-radius: 100%;
    background: green;
    margin-top: -7%;
    color:black!important;
}


.ptag {
    position: absolute;
    top:0; /* set at top */
    margin-left: -7%;
    width: 7%;
    border: 1px solid red;
    height: 100%;
    background: lightblue;
    color: white;
    text-align: center;
}
.circle{
    width: 50px;
    height: 50px;
    float: right;
    border-radius: 100%;
    background: green;
    margin-top: -7%;
    color:black!important;
    text-align: center;
    line-height: 50px; /* same as height */
}

Plunker Demo

Use text-align: center and line-height to center the texts inside div.

Your corrected CSS here:

.ptag {
    position: absolute;
    margin-left: -7%;
    width: 7%;
    border: 1px solid red;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: lightblue;
    color: white;
}
.circle{
    width: 50px;
    height: 50px;
    float: right;
    border-radius: 100%;
    background: green;
    margin-top: -7%;
    text-align: center;
    line-height: 50px;
    color:black!important;
}

I already gave you a solution here: how to create row in angular js?

In the other question you appear to be asking for the row div and all of it's children to dynamically size based upon the screen resolution.

In the plunker you did not give external css hence the solution I pasted there and here has the css inline. The below will make the div containing P be 100% height along with the rest of the content being 'dynamic' in that they maintain their aspect ratios on different resolutions screens.

Including an updated plunker: http://plnkr.co/edit/Z8w97NgD15rwuKjnmr05?p=preview

<div class="" style="height: 30vw; position:relative; width: 100%;">
  <div style="float: left;background: gray; height:100%; width: 10%; text-align:center;">
    <div style=" position:relative; top:40%;">P</div>
  </div>
  <h2>16000389</h2>
  <p>RutherFord & Alfanso Company Lmt</p>

  <div style="border: 1px solid black;float: right;background: green;border-radius: 100%;width: 20vw; height: 20vw;position:absolute; top:20%; text-align:center; right:10%">
  <div style=" position:relative; top:30%;">650</div>
  </div>

</div>