Dave Dave - 1 month ago 12
CSS Question

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

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 Source

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

.change {
  display:inline-block;
}

jsFiddle example