css - align center two elements different width -

css - align center two elements different width -

how create 2 elements aligned @ same distance line in center should in center of wrapper. wrapper width not fixed , 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 - expect

you accomplish this:

(updated .classes instead of #ids)

jsfiddle - demo

class="snippet-code-css lang-css prettyprint-override">.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; } class="snippet-code-html lang-html prettyprint-override"><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>

css css3