How to align number and text dynamically - html

Question

My content has listing and it shows like this
1 ABCD
2 ABCD
3 ABCD
4 ABCD
The number and the text can be increase to any extent like
100 ABCD
1000 ABCD
9999 ABCD
But when it comes to alignment, then the text move forward according to the number. But when compare the alignment between 1 and 9999, text are not aligned.
What i need is no matter what number it goes, the alignment of the text between 1 and 9999 should be same.
I am using div tag for number and title
My css for number is like this
number{width:auto;margin-right:4%;float:left;overflow:hidden}
title{width:85%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
Please help.
Here is a working fiddle.

Answer 1

This might be a trivial answer but.. why not use a table?
<table>
<tr>
<td>100</td>
<td>ABCD</td>
</tr>
<tr>
<td>99</td>
<td>ABCD</td>
</tr>
</table>
Edit
Another option would be to use a flexbox

Answer 2

You can try giving the number a fixed width if you know the maximum number of digits it'll have
.number {
display: inline-block;
width: 50px;
}
<div>
<span class="number">1</span>
<span class="title">ABCD</span>
</div>
<div>
<span class="number">9</span>
<span class="title">AB</span>
</div>
<div>
<span class="number">99</span>
<span class="title">ABC</span>
</div>
<div>
<span class="number">999</span>
<span class="title">A</span>
</div>
<div>
<span class="number">9999</span>
<span class="title">ABCD</span>
</div>

Answer 3

https://jsfiddle.net/uzbw6anq/
<div class="container">
<div>
<div class="rightAligned">
<p>
1234
</p>
</div>
<div class="leftAligned">
<p>
MyText
</p>
</div>
</div>
<div>
<div class="rightAligned">
<p>
123
</p>
</div>
<div class="leftAligned">
<p>
MyNewText
</p>
</div>
</div>
</div>
*{
margin: 0;
}
.container{
display: table;
}
.leftAligned, .rightAligned {
display: inline-block;
margin: 5px;
}
.leftAligned{
width: 100px;
text-align: left;
}
.rightAligned{
width: 50px;
text-align: right;
}

Answer 4

You can try to use CSS Grid, I have removed the div with class parent, if that is needed, please let me know.
You can remove the text-align: right if you do not need it.
http://jsfiddle.net/qdmL6b9x/10/