Aligning 3 elements together side by side - html

Question

So I want to align these three elemts so they are side by side on the page, first the '1' follow by the image follow by the 'text'. I cannot work out at all how to do this can somebody help?
My HTML:
<div class="chart-game">
<div id="1">
<h1>1</h1>
</div>
<div id="1img">
<img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg">
</div>
<div id="1p">
<p>Text</p>
</div>
</div>
My CSS:
.chart-game img {
width:100px;
height:100px;
}
#1 {
display:inline-block;
margin-right:10px;
}
#1img {
display:inline-block;
margin-right:10px;
}
#1p {
display:inline-block;
}
Any help would be greatly appreciated, thank you.

Answer 1

Try this:
html:
<div class="chart-game">
<div class="chart-game-inner">
<h1>1</h1>
</div>
<div class="chart-game-inner">
<img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg" />
</div>
<div class="chart-game-inner">
<p>Text</p>
</div>
</div>
css:
.chart-game img {
width:100px;
height:100px;
}
.chart-game-inner {
display : inline-block;
}

Answer 2

Change the names of the Id to not contains any numbers at the beginning of the string.
The code is working fine
New HTML
<div class="chart-game">
<div id="header">
<h1>1</h1>
</div>
<div id="image">
</div>
<div id="text-header">
<p>Text</p>
</div>
</div>
And the CSS
.chart-game img {
width:100px;
height:100px;
}
#header {
display:inline-block;
margin-right:10px;
}
#image {
width: 50px;
height:50px;
background : #dedede;
display:inline-block;
margin-right:10px;
}
#text-header {
display:inline-block;
}

Answer 3

You have to use floats
css
.chart-game img {
width:100px;
height:100px;
float:left;
}
#1 {
display:inline-block;
margin-right:10px;
}
#1img {
display:inline-block;
margin-right:10px;
float:left;
}
#1p {
display:inline-block;
}
h1{
float:left;
}
p{
float:left;
}
Additional class identifiers are allowed to start with a number, but ID identifiers are not.
fiddle