html - How can i center align two divs? -

how can align 2 inline divs adjacent edges center?

so i'd this:

    div1div1 div2div2         div1 div2 div1div1div1 div2div2 

i tried using inline block like below merely centering each line.

.container {    text-align: center;  }  .left-div {    display: inline-block;  }  .right-div {    display: inline-block;  }

<div class="container">    <div class="left-div">div1div1</div>    <div class="right-div">div2div2</div>  </div>  <div class="container">    <div class="left-div">div1</div>    <div class="right-div">div2</div>  </div>  <div class="container">    <div class="left-div">div1div1div1</div>    <div class="right-div">div2div2</div>  </div>

https://jsfiddle.net/fkfmh7md/ change distance between divs, change 5px in padding:0 5px other value

.container {    display: table;    table-layout: fixed;    width: 100%;  }  .container div {    display: table-cell;    padding: 0 5px;  }  .container div.left {    text-align: right;  }

<div class="container">    <div class="left">div1div1</div>    <div>div2div2</div>  </div>  <div class="container">    <div class="left">div1</div>    <div>div2</div>  </div>  <div class="container">    <div class="left">div1div1div1</div>    <div>div2div2</div>  </div>