How to show the relationship between two input fields with different units

Question

In an internal retirement site, I am working on improving the flow that employees go through to change their contribution amounts.

One challenge is that users can contribute both pre-tax and after-tax--previously the relationship between the two was unclear. I need (and want) to show both the contribution percentage AND the estimated amount taken out of their paycheck. I'd like to give the user the option to edit either the percentage or the dollar amount. I'd also like to show what their current settings are, and indicate that they're editable.

This is what I have so far:

What would make the relationship between the percentage and the dollar amount more clear? And what would help reveal the existing amounts in all the categories and allow the user to edit the fields?

Update: Ok, I tried a new version with radio buttons (because I'm not a dropdown fan, especially for touch situations)

The idea here is that with the radio button it would toggle between what is editable. I want to make sure that users see the other unit results as they change the numbers so they can see the effect. However, I think I would like this better if American conventions said that percentages and dollar symbols would be on the same side. Alignment makes this challenging.

Answer 1

Put amount and percentage together. Make all fields enterable. When the amount is changed, automatically change the respective percentage, and vice versa. See below :

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

The only difference between the two forms are the percentage and the dollar sign. So you change it dynamically. I suppose you can only show the amount if you have the dollar values, but can show the percentage either way. Here's a mockup of my idea:

^{download bmml source – Wireframes created with Balsamiq Mockups}