two divs in the same row after and before ZOOM IN

two divs in the same row after and before ZOOM IN

I have two divs here: http://jsfiddle.net/TXSfN/
CSS CODES:
#div1{
background-color: red;
display: inline-block;
width: 50%
}
#div2{
background-color: blue;
width: 20%
display: inline-block;
height: 263px;
float: right;
}
I'm trying to set the two divs in the same line also after
zoom-in/zoom-out in browser(CTRL +/CTRL -). The problem isn't with setting
the two divs in the same line, it's with the zoom-in/out, when I
zoom-in/out the div with the long content get's longer and longer with the
height and the one with the short content stay as it is. Is there a way to
set the two divs in the same row for every action(zoom-in/out).