2つのdivを1行に整列させますが、同じ要素にはありませんか？

Question

ここに例を書きます：https://jsfiddle.net/1631pndx/2/

2つの要素は2つの異なるdivに属します。しかし、私はそれらを1つの行に表示したい。他の要素を変更しないでください。 JavaScriptなしで、CSS経由で、どうやってこれを行うのですか？

.container_1, 
 
.container_2, 
 
.container_3 { 
 
    min-width: 200px; 
 
    min-height: 200px; 
 
    border: solid 2px lightblue; 
 
    margin: 10px; 
 
} 
 

 
.container_2 { 
 
    border: solid 2px gray; 
 
} 
 

 
.container_3 { 
 
    border: solid 2px chocolate; 
 
}

<div class="container_1"> 
 
    <h3> 1st element </h3> 
 
</div> 
 
<div class="container_2"> 
 
    <p> some other elements</p> 
 
    <div class="container_3"> 
 
    <p> some other elements</p> 
 
    <h3>2nd element</h3> 
 
    <h4>[The 1st element should in here]</h4> 
 
    </div> 
 
</div>

Answer 1

各元素の含有量が動的である場合、これは、非常に（おそらく不可能）困難であり、エラーが発生しやすいであろう。

概要を説明した場合、内容は比較的固定されています。その場合、固定topとleftのプロパティを持つposition: absoluteを使用できます。このような何か：コンテンツがどのような方法で動的である場合

.container_1, 
 
.container_2, 
 
.container_3 { 
 
    min-width: 200px; 
 
    min-height: 200px; 
 
    border: solid 2px lightblue; 
 
    margin: 10px; 
 
} 
 

 
.container_1 { 
 
    position: absolute; 
 
    top: 148px; 
 
    left: 32px; 
 
    width: calc(100% - 88px); 
 
} 
 

 
.container_2 { 
 
    border: solid 2px gray; 
 
} 
 

 
.container_3 { 
 
    border: solid 2px chocolate; 
 
    min-height: 310px; 
 
}

<div class="container_1"> 
 
    <h3> 1st element </h3> 
 
</div> 
 
<div class="container_2"> 
 
    <p> some other elements</p> 
 
    <div class="container_3"> 
 
    <p> some other elements</p> 
 
    <h3>2nd element</h3> 
 
    
 
    </div> 
 
</div>

ここでも、意味それは高さがありますが、上記の例では異なっている、様々なbottomとmin-heightの特性を調整する必要があります。