html - CSS: 3 columns not fixed in width, middle one needs to stay centered -

oke i've searched high , low can't find similar problem. have 3 span's text in them , need middle span of text centered in same spot , left , right ones relative that. clicking on left or right span values change.

<div class="container">   <span class="left">a</span>   <span class="middle">b</span>   <span class="right">c</span> </div> 

the span's dynamically. middle span @ least 1 character can more characters. left , right 1 can contain 0 or more characters.

i tried using flex-box don't think that in situation. problem every time middle 1 not in same spot jumps around when left or right value not same amount of characters before values change.

i've included small example of problem.

var position = 1;    $('.left').click(function() {    if (position == 1) {      $('.left').text('');      $('.middle').text('a');      $('.right').text('b');      position = 0;    } else {      reset();    }  });    $('.right').click(function() {    if (position == 1) {      $('.left').text('b');      $('.middle').text('c');      $('.right').text('');      position = 2;    } else {      reset();    }  });    function reset() {    position = 1;    $('.left').text('a');    $('.middle').text('b');    $('.right').text('c');  }

.container {    width: 200px;    text-align: center;    background-color: #eeeeee;  }    .container span {    font-size: 2em;  }    .container span:nth-child(2) {    font-size: 3em;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container">    <span class="left">a</span>    <span class="middle">b</span> <!-- needs stay in same spot -->    <span class="right">c</span>  </div>

thanks in advance!

you need position left , right elements , add wrapper.

firstly, add inner wrapper can use absolute positioning relative inner div.

now set wrapping div inline-block , apply text-align:center parent center div.(other centering methods exist of course).

now set both left , right divs position:absolute contents no longer affect flow.

by applying right:100% left div right end of wrapping div.

the converse applies right div gets left:100%.

because positioned divs collapse minimum width need appply white-space:nowrap text not wrap inside specific span.

.container {    text-align: center;    margin-bottom: 1em;    background: #c0ffee;  }  .wrap {    display: inline-block;    background: pink;    position: relative;  }  .left,  .right {    position: absolute;    top: 0;    white-space: nowrap;  }  .middle {    display: block;  }  .left {    background: orange;    right: 100%;  }  .right {    background: red;    left: 100%;  }

<div class="container">    <div class="wrap">      <span class="left">a</span>      <span class="middle">b</span>      <span class="right">c</span>    </div>  </div>    <div class="container">    <div class="wrap">      <span class="left">a long long string</span>      <span class="middle">bbbbb</span>      <span class="right">complex</span>    </div>  </div>