Как получить внутренний DIV в верхней части внешнего DIV

Question

меня такая ситуация:

Я хочу стол, на правой стороне, чтобы быть на той же высоте, что и форма на левой стороне.

Вот мой CSS:

.left { 
height: auto; 
width: 550px; 
} 

.right { 
height: auto; 
width: 550px; 
padding-left: 40px; 
} 

.innerRight { 
height: auto; 
} 

.middle { 
height: auto; 
position:absolute; 
left:50%; 
top:17%; 
bottom:15%; 
border-left:1px solid grey; 
} 

.left, .right { 
display: inline-block; 
} 

Как я могу это сделать?

Я использовал плавающее, но тогда высота не настраивается автоматически, поэтому я не могу ее использовать.

Answer 1

Вы могли бы дать им обоим position:absolute; затем расположите их сверху, слева, справа, ЭСТ ..

Answer 2

Без вашего фактического HTML кода, вот пример, который может помочь вам с помощью CSS свойство table-row, table-cell.

.wrap { 
 
    overflow: hidden; 
 
    width: 250px; 
 
    display: table; 
 
    border-collapse: collapse; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.left { 
 
    width: 50%; 
 
    display: table-cell; 
 
    background-color: yellow; 
 
} 
 
.middle { 
 
    border-left: solid 1px red; 
 
    width: 1px; 
 
    display: table-cell; 
 
} 
 
.right { 
 
    width: 50%; 
 
    background-color: orange; 
 
    display: table-cell; 
 
}

<div class="wrap"> 
 
    <div class="row"> 
 
    <div class="left">Lorem</div> 
 
    <div class="middle"></div> 
 
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
     <br/> 
 
     <br/> 
 
     <br/> 
 
     <br/> 
 
     <br/> 
 
    </div> 
 
    </div> 
 
</div>