Trouble with margins and padding in div next to floated div

[evenstar7139]

http://i22.photobucket.com/albums/b3...screenshot.gif

I don't seem to have any control over margin-left and padding-left in inner_content. It jams the div and content up against inner_data. I want a 2px margin between them and for inner_content to have a left padding of 6px

CSS:
.wrapper {
width: 600px;
margin: 0 auto;
background: #432b13;
text-align: center;
padding: 2px;
border-radius: 6px;
}
.wrapper_title {
color: #dacea4;
padding: 3px;
font-weight: bold;
}
.inner_data
{
text-align: right;
font-weight: bold;
float: left;
width: 20%;
background: #956f4f;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 6px;
border-radius: 6px;
margin-top: 2px;
}

.inner_content
{
text-align: left;
background: #dacea4;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
margin-top: 2px;
border-radius: 6px
}

HTML:
<div class="wrapper">
<div class="wrapper_title">
Bank Account Information
</div>

<div class="inner_data">
Balance
</div>
<div class="inner_content">
<?php print number_format($bank_balance)?> DRP
</div>

<div class="inner_data">
Interest Rate
</div>
<div class="inner_content">
5%
</div>

</div>