Unfortunately there isn't necessarily a CSS change that can match paddings across different elements regardless of content. There are attributes like max-height which should prevent an element from exceeding a certain limit, but using something like that here when you are dealing with such a close-knit element and its padding, it would give you an off-center input.
The most logical solution (in my opinion) is to adjust all elements to accomodate this situation. The line-height attribute is an easy fix for this if you don't care to use a fixed height value. It will also make sure to vertically center your text so you don't have to worry about anything being off. 28px seemed to be the minimum line-height value to match the elements up properly.
As for dynamic widths, you could return to percentages, but the tricky part comes from your padding values since they alter the actual rendered width of an element. Something like this works for total widths 500px and greater:
<!DOCTYPE html>
<head>
<title>Padding/Margin Test</title>
<style type="text/css">
.wrapper {
background: #432b13;
text-align: center;
width: 600px;
margin: 0px auto;
padding: 2px;
border-radius: 6px;
}
.wrapper_title {
color: #dacea4;
font-weight: bold;
font-size: 16px;
padding: 3px;
}
.inner_data {
background: #956f4f;
text-align: right;
font-weight: bold;
line-height: 28px;
width: 20%;
display: inline-block;
zoom: 1;
*display: inline;
margin-right: 0px;
margin-bottom: 1px;
padding: 3px 4px;
border-radius: 6px;
}
.inner_content {
background: #dacea4;
text-align: left;
line-height: 28px;
width: 76%;
display: inline-block;
zoom: 1;
*display: inline;
margin-top: 2px;
margin-bottom: 1px;
padding: 3px 4px;
border-radius: 6px
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapper_title">
Bank Account Information
</div>
<div class="inner_data">
Balance
</div>
<div class="inner_content">
54,000 DRP
</div>
<div class="inner_data">
Interest Rate
</div>
<div class="inner_content">
<input type="text" />
</div>
</div>
</body>
</html>
Once you sink below 500px then it pretty much dies. Rather than remove all the padding, you could alternatively use a smaller percentage for your .inner_width class, but that's only if you need to bring the main element down below 500px.