How to display two divs with only text inside next to each other?

Question

Currently I have two divs:

<div id="first">gdsgdsgsd</div><div id="second">aaaaaaa</div>

and the output is:

gdsgdsgsd
aaaaaaa

However I would like to have the output as:

gdsgdsgsdaaaaaaa

Here's a very plain fiddle for that :) http://jsfiddle.net/6oqrj9oo/1/

Do you have any advices for fixing that? Thanks

Answer 1

These divs are block level elements so will appear stacked on top of eachother. Try making them inline or inline-block. Inline elements will sit side by side.

#first, #second {
    display: inline;
}

Alternatively you could float them

Answer 2

Use display:inline-block

div{
    display:inline-block;
}

<div id="first">gdsgdsgsd</div><div id="second">aaaaaaa</div>