html - Moving div down without moving rest of the content -

i have border trying align vertically text , every time try , move down rest of content moves down making impossible complete task. can see in picture below, border above text , want vertically aligned.

#work {    color: #a5a5a5;    font-family: hobo std;    font-size: 1.3em;    text-align: center;  }  .leftrule {    border-top: 2px solid #a5a5a5;    width: 100px;    margin-left: 30%;  }  .videos {    margin-top: 50px;  }  .dancer-vid-left {    background-image: url(images/dancer2.png);    background-repeat: no-repeat;    height: 300px;  }  #video1 {    border: 15px solid #373636;    box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);    background-color: #373636;    width: 480px;  }

<div class="leftrule"></div>  <p id="work">my work!</p>  </div>  <div class="rightrule"></div>    <div class="row videos">  </div>    <div class="col-md-6">    <div id="video1">      <iframe frameborder="0" height="315" src="https://www.youtube.com/embed/q3bef0phr00" width="450"></iframe>    </div>  </div>    <div class="col-md-6">    <div id="video2">      <iframe frameborder="0" height="315" src="https://www.youtube.com/embed/q3bef0phr00" width="450"></iframe>    </div>  </div>

it sounds me want aligned middle of text either side. use :before , :after pseudo selectors task.

#workcontainer {    text-align: center;    }  #work {    color: #a5a5a5;    font-family: hobo std;    font-size: 1.3em;    position: relative;    display: inline-block; /* element needs not flow whole width, place in container , inline-block */  }  #work:before, #work:after {    content: '';    border-bottom: 2px solid #a5a5a5;    width: 100px;    top: 50%;    position: absolute;  }  #work:before {    left: 100%;    margin-left:20px;  }  #work:after {    right: 100%;    margin-right:20px;  }

<div id="workcontainer">    <p id="work">my work!</p>  </div>

just increase or decrease margin move lines closer or further away.