CSS horizontally align two divs with different height

I am trying to place 2 divs with different height next to each other horizontally that are in a div. With my code, the second div box stays at the bottom of the first div square.

box's width and height are set BUT with square div, height and width are not set and I don't want to set it.

With this condition, how do achieve the result that I want? and If this cannot be done with CSS, using Jquery is fine as well.

HTML

<div id="wrapper">
  <div id="square"></div>
  <div id="box">Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text</div>
</div>

CSS

#wrapper {
  display: inline-block;
  border: 1px solid black;
}

#square {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  display: inline-block;
}

#box {
  border: 1px solid red;
  float: right;
  display: inline-block;
}

DEMO

jsfiddle