Sometimes DIVs are making like a ladder - html

Question

I am developing a Chrome extension.
Sometimes when I'm clicking on the extension icon, divs are making like a "ladder":
I want it to be like this:
How can I ensure the currency fields are aligned properly?
Here is my markup:
<div class="calc">
<div class="in">
<img id="cur-img-in" src="img/AMD.gif"/>
<select name="currency-calc-cur" id="in-select">
<option selected="selected" value="AMD">AMD</option>
<option value="EUR">EUR</option>
<option value="RUR">RUR</option>
<option value="USD">USD</option>
</select>
<input type="text" id="in"/>
</div>
<img id='swap-cur' src="img/swap.png" alt="Swap"/>
<div class="out">
<img id="cur-img-out" src="img/USD.gif"/>
<select name="currency-calc-cur" id="out-select">
<option value="AMD">AMD</option>
<option value="EUR">EUR</option>
<option value="RUR">RUR</option>
<option selected="selected" value="USD">USD</option>
</select>
<input type="text" id="out"/>
</div>
</div>
And style:
.calc {
margin-top: 10px;
margin-left: 20%;
width: 60%;
}
.calc input[type="text"] {
width: 100%;
}
.calc #bank-list {
width: 100%;
}
.calc [name="currency-calc-cur"] {
width: 78%;
}
.calc .in {
width: 40%;
position: relative;
float: left;
}
.calc .out {
width: 40%;
position: relative;
float: right;
}
.calc #swap-cur {
margin: 17px 0 0 16px;
}
And my sources from GitHub if something is missing.

Answer 1

Your image likely needs to be floated as well.
.calc #swap-cur {
float: left;
margin: 17px 0 0 16px;
}