"display='block'" not keeping my DIVs on the same line

Question

I'm trying to get two DIVs to stay on the same horizontal plane. I have

<div id="timeChanges">

<div id="oneDayChange" class="change">
            One day change 
        <div>
            <div id="downArrow" class="downArrow arrow"></div>
        - 14.961 / -7.66 % 
        </div>
    </div>

    <div id="oneWeekChange" class="change">
            One week change 
        <div>
            <div id="upArrow" class="upArrow arrow"></div>
        + 34.863 / 17.851 % 
        </div>
    </div>

  </div>

and have tried the CSS

#timeChanges {
  display: inline-block;
}

I've also tried just "block" for the above. But as you can see, https://jsfiddle.net/Ldk7ovjp/1/, my two DIVs are on different lines. How do I keep them on the same one?

Answer 1

Using display:inline-block on the change class seems to work:

.change {
  display:inline-block;
}

jsFiddle example