どのように2つのdivを整列させることができますか？

Question

隣接する辺が中央になるように2つのインラインdivを揃える方法はありますか？

だから私は、それは次のようになりたいのですが：

div1div1 div2div2 
     div1 div2 
div1div1div1 div2div2 

私は以下のようなのようなインラインブロックを使用してみましたが、それは単に各行を中心にしています。

.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>

Answer 1

https://jsfiddle.net/fkfmh7md/パディングにdivを、変更5pxの間の距離を変更します。それ以外の値に0 5pxの

.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>