image between 2 inline-table divs - doesn't work with bootstrap - html

Question

I'm working on some trading ingame items site, that's not important here.
My actual code is:
<div class="trade">
<h6><strong>RaiZeN</strong> wants to trade: (5 minutes ago)</h6>
<div class="items-holder">
<div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
<div class="item-rarity">Field-Tested</div>
<div class="pink"></div>
</div>
<div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
<div class="item-rarity">Field-Tested</div>
<div class="pink"></div>
</div>
</div>
<div class="arrow">
<img src="http://i.imgur.com/dusRcnt.png" />
</div>
<div class="items-holder">
<div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV086jloKOhcj8NrrHj1Rd6dd2j6fA9ImniQex_UQ_NT-nJtKRJgU3aFHY_Vm-ybrqjMO56Z3OnXE27HIq-z-DyAtSAyL7/360fx360f');">
<span class="item-rarity">Battle-Scared</span>
<div class="red"></div>
</div>
</div>
</div>
JSFIDDLE
As you can see, the arrow is not at same height as rest. But, if I will remove bootstrap (remove first html line), it works just fine. Problem is, I need to use bootstrap on my site. How can I fix that?

Answer 1

check this - https://jsfiddle.net/7curr49y/1/
the changes i made are these -
.items-holder
{
background-color: #E7E7E7;
border-radius: 4px;
padding: 10px;
display: inline-block;
border-collapse: separate;
border-spacing: 10px 0px;
vertical-align:middle;
}
changed "inline-table" to "inline-block" and added "vertical-align:middle".
hope that helps!