ブロック要素を左側に開く（展開する）方法は？

Question

私は位置を固定し、ウィンドウに次のようになりている2つのブロック要素を持って言うことができます：

-------------- 
|  xxx | 
|  xxx | 
|   | 
|  xxx | 
|  xxx | 
|   | 
-------------- 

私は要素はこのように、ホバー上の左に拡張したい：

-------------- 
|  xxx | 
|  xxx | 
|   | 
|  xxxxxx | 
|  xxxxxx | 
|   | 
-------------- 

しかし、今は右に拡大しています。実際の例をここに見ることができます：https://jsfiddle.net/eeuho5vq/2/

いずれの解決策も高く評価されます。

Answer 1

親にdisplay: flex; flex-direction: column; align-items: flex-end;を使用し、要素を右揃えにします。

\t $(".container").each(function(){ 
 
\t \t $(this).hover(function(){ 
 
\t \t \t $(this).toggleClass("show"); 
 
\t \t }) 
 
\t })

#wrapper { 
 
    position: fixed; 
 
    right: 1em; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
} 
 

 
.container { 
 
    width: 2em; 
 
    height: 2em; 
 
    background: yellow; 
 
    margin: 1em 0; 
 
} 
 

 
.container.show { 
 
    width: 4em; 
 
    height: 2em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="container"> 
 
    <!--element 1--> 
 
    </div> 
 
    
 
    <div class="container"> 
 
    <!--element 2--> 
 
    </div> 
 
    
 
</div>

Answer 2

だけ.containerにこれを追加します。

float: right; 
    clear: both; 

更新スニペット：https://jsfiddle.net/eeuho5vq/3/