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**](https://jsfiddle.net/mkt186br/)