Почему не работает position: relative?

Question

[gazes12]

https://jsfiddle.net/d8f2u1zn/7/

Полоска должна быть позиционирована относительно заголовка, ну position relative у заголовка не работает! Почему?

Хочу сделать как тут:

Answer 1

[SaberChazer]

А если

<div id="container">
<h1>Text</h1>
<div id="line"></div>

#line {
width: 50%;
height: 5px;
background: orange;
}
#container {
position: relative;
}

Просто типо макет

Comments

[gazes12]

Спасибо! Теперь могу управлять полоской как хочу!

[SaberChazer]

gazes12, не за что

Answer 2

[Максим Иванов]

Намного лучше сделать полоску псевдоэлементом. Да и намного проще.
Какой смысл морочиться ещё с одним дивом?

https://codepen.io/roderen/pen/xxpygKr