Позиция один DIV над другим DIV с определенной длиной

Question

Я ищу для достижения следующего макета:

У меня есть к изображениям, которые должны быть рядом друг с другом в верхней части. Тогда мне нужна прямая белая линия, идущая от левого изображения (x-координата) и почти до вершины (y-координата) до самого нижнего.

Я пришел до сих пор в моей конструкции, но при изменении размера окна он изменяет как хорошо: https://jsfiddle.net/toekttbu/

HTML: 

<div class="container"> 
    <img src="https://pixabay.com/static/uploads/photo/2013/09/17/20/22/seagull-183229_960_720.jpg" id="pic-1"> 

    <img src="https://pixabay.com/static/uploads/photo/2015/10/29/14/44/sunset-1012477_960_720.jpg" id="pic-2"> 

    <div id="white-line> 
    </div> 
</div> 

CSS: 

body { 
    background-color: #000; 
    margin: 0; 
    padding: 0; 
} 

.container { 
    height: 100px; 
    width: 100%; 
    position: relative; 
} 

#pic-1 { 
    position: absolute; 
    width: 35.35%; 
    background-color: #f00; 
} 

#pic-2 { 
    width: 64.65%; 
    position: absolute; 
    right: 0; 
} 

#white-line { 
    width: 5px; 
    position: absolute; 
    height: 350%; 
    background-color: #FFF; 
    top: 100%; 
    left: 7%; 
} 

Я хочу белую линию всегда оставаться на том же самом положении на чайке. Я знаю, почему он не работает, потому что белая линия занимает позицию, используя 100 пикселей от высоты контейнера.

Мне нужно было бы установить его, используя процент высоты чайки. Возможно ли это использование только CSS?

Также я хочу, чтобы белая линия всегда была до тех пор, пока текст, который будет под изображениями. Таким образом, он может иметь разную длину на разных страницах. Возможно ли это также с помощью CSS?

Большое спасибо

Answer 1

Что-то вроде этого?

Edit:, если вы хотите, чтобы линия выше и немного дольше, чем текст, вам необходимо изменить некоторые значения, например:

#pic-1, 
#pic-2 { 
    margin-top: -5% 
} 

p { 
    padding: 20% 5% 20px 5%; 
    margin-top: 5%; 
} 

DEMO

body { 
 
    background-color: #000; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #fff; 
 
} 
 

 
.container { 
 
    height: 100px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
#pic-1 { 
 
    position: absolute; 
 
    width: 35.35%; 
 
    background-color: #f00; 
 
    margin-top: -15%; 
 
} 
 

 
#pic-2 { 
 
    width: 64.65%; 
 
    position: absolute; 
 
    right: 0; 
 
    margin-top: -15%; 
 
} 
 

 
p { 
 
    position: relative; 
 
    padding: 10% 5% 0px 5%; 
 
    margin-top: 15%; 
 
    margin-left: 15px; 
 
} 
 

 
p:before { 
 
    content: ""; 
 
    width: 5px; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    display: inline-block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-left: -15px; 
 
}

<div class="container"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2013/09/17/20/22/seagull-183229_960_720.jpg" id="pic-1"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/29/14/44/sunset-1012477_960_720.jpg" id="pic-2"> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, nibh et vestibulum lobortis, erat mauris tempor tellus, ac condimentum massa tortor a ante. Ut ut eleifend purus. Quisque semper neque vulputate libero eleifend, a tincidunt diam aliquet. 
 
    Proin vehicula, erat id hendrerit suscipit, ante justo iaculis mauris, a ullamcorper ipsum ligula eget sapien. Nulla lorem leo, ullamcorper at justo dapibus, bibendum maximus metus. Aliquam tempus ligula rhoncus, rutrum magna a, dictum nibh. Fusce 
 
    accumsan neque egestas nibh lacinia tristique. 
 
    </p> 
 
</div>

Answer 2

, если линия будет всегда на левой стороне и начать 100px сверху, почему не используется фиксированное положение;

#white-line { 
    width: 5px; 
    position: fixed; 
    height: 90%;//350% is 3.5 times the height of the parent. why ? 
    background-color: #FFF; 
    top: 100px;//is the picture always 100px tall ? play with the top position 
    left: 30px;//no need to do with % because it should be at the same LEFT position 
} 

это то, что я понял из вопроса, если я ошибаюсь и можно сказать ...

читать о позиционировании: http://www.w3schools.com/cssref/pr_class_position.asp