align center two elements different width - css

Question

How to make two elements aligned so they will be at same distance from line in center which should be in center of wrapper. Also wrapper width is not fixed and may change.
http://jsfiddle.net/x2b2ax37/2/
<div id="block">
<div id="wrapper">
<span id="div1">2222</span>
<span id="div2">2 %</span>
</div>
<div id="wrapper">
<span id="div1">11</span>
<span id="div2">100 %</span>
</div>
<div id="wrapper">
<span id="div1">21</span>
<span id="div2">0 %</span>
</div>
</div>
1 - Initial 2 - What I expect

Answer 1

You could achieve it like this:
(Updated with .classes instead of #IDs)
JSFiddle - DEMO
.wrapper {
position: relative;
}
.div1 {
border: 1px solid #F00;
right: 50%;
position: absolute;
}
.div2 {
border: 1px solid #000;
position: relative;
left: 50%;
display: inline-block;
}
.block {
border: 1px solid green;
width: 200px;
}
<div class="block">
<div class="wrapper">
<span class="div1">2222</span>
<span class="div2">2 %</span>
</div>
<div class="wrapper">
<span class="div1">11</span>
<span class="div2">100 %</span>
</div>
<div class="wrapper">
<span class="div1">21</span>
<span class="div2">0 %</span>
</div>
</div>

Answer 2

The trick as shown earlier by Mary Melody is to use a combination of absolute and relative positioning on the child span elements, .div1 and .div2.
To make sure that the top and bottom border edges line up exactly, apply display: inline-block
to the span child elements.
The trick is to keep .div2 in the flow with a 50% left margin, which provides space for .div1,
which will be absolutely positioned using right: 50%.
To control the spacing between the two span's, add a 1px right-margin to .div1 and to preserve
symmetry, use left: 1px on .div2.
.wrapper {
position: relative;
border: 1px dashed blue;
margin-bottom: 10px;
}
.div1, .div2 {
border: 1px dotted blue;
display: inline-block;
}
.div1 {
position: absolute;
right: 50%;
margin-right: 1px;
}
.div2 {
position: relative;
margin-left: 50%;
left: 1px;
}
<div class="block">
<div class="wrapper">
<span class="div1">2222</span>
<span class="div2">2 %</span>
</div>
<div class="wrapper">
<span class="div1">11</span>
<span class="div2">100 %</span>
</div>
<div class="wrapper">
<span class="div1">21</span>
<span class="div2">0 %</span>
</div>
</div>

Answer 3

i do not advise to use id, u can use classes because u can not repeat the same ids each time, below is the code updated and as well a live demo.
.wrapper_block{
text-align: center;
}
.wrapper_container span{
display: inline-block;
vertical-align: top;
}
.wrapper_container span span{
display: block;
}
.wrapper_left{
text-align: right;
}
.wrapper_right{
text-align: left;
}
.wrapper_left span{
border: 1px solid red;
margin-bottom: -1px;
}
.wrapper_right span{
border: 1px solid black;
margin-bottom: -1px;
}
<div class="wrapper_block">
<div class="wrapper_container">
<span class="wrapper_left">
<span>2222</span>
<span>11</span>
<span>21</span>
</span>
<span class="wrapper_right">
<span>2 %</span>
<span>100 %</span>
<span>0 %</span>
</span>
</div>
</div>

Answer 4

Just need to make the div1 and div2 to inline blocks and set a width for them and also text-align to the different alignments.
Simple example
#div1 {
border: 1px solid red;
display:inline-block;
width: 50px;
text-align:right;
}