How do I align the text correctly in html

Question

I'm trying to align the text to right like the first row but the second row keeps spilling below the image. How do I make the text properly aligned no matter the number of rows?

<a href="javascript:;" id="A_3"><i id="I_4"></i></a><span id="SPAN_5">     
</span>
<h5 id="H5_6">Payroll</h5>
    <p id="P_7">
        What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv</p>

check the jsbin please:

Edit: I see that Safari(1) is displaying this correctly but Google Chrome(2) isn't.

Answer 1

Remove box-sizing: border-box; from both the elements. Also add width: 457.5px; to #H5_6

Check below code.

 #A_3 { float: right; height: 65px; text-align: center; width: 65px; background: rgb(153, 153, 153) none repeat scroll 0% 0% / auto padding-box border-box; border-radius: 50% 50% 50% 50%; font: normal normal normal normal 35px / 50px'Open Sans', arial, sans-serif; } /*#A_3*/ #H5_6 { text-align: right; width: 457.5px; } /*#H5_6*/ #P_7 { color: rgb(95, 95, 95); height: 56px; text-align: right; width: 457.5px; font: normal normal 300 normal 16px / 30.8px'Open Sans', arial, sans-serif; } /*#P_7*/ 

 <a href="javascript:;" id="A_3"><i id="I_4"></i></a><span id="SPAN_5"></span> <h5 id="H5_6"> Payroll </h5> <p id="P_7"> What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv </p> 

Answer 2

http://jsbin.com/qigitoyeyo/1/edit?html,css,output

You can just set "margin-right:115px;" on the <p> tag.

That way you don't have to manually set the height and width.

Answer 3

I fixed it by adding

margin: 0px 25px 80px;

to the A_3 element (the bootstrap circle)

Thanks a lot for your help!