html - Trouble with vertical line between two divs' -

i'm trying create vertical line divides 2 div's word or in middle of line(s). i'd vertical lines span entire height, instead 1px each. css needs responsive , height of form fields change depending on selection, can't use fixed height.

<section>    <div class="row">       <div class="col-md-5">form fields left</div>       <div class="col-md-2">          <div class="col-md-12 v-separator"></div>          <div class="col-lg-12" style="text-align: center">or</div>          <div class="col-md-12 v-separator"></div>       </div>       <div class="col-md-5">form fields right</div>    </div> </section> 

.col-md-2,.col-md-5,.col-md-12  {    float:left;    position:relative;    min-height:1px;    padding-right:15px;    padding-left:15px } .col-md-2{width:16.66666667%} .col-md-5{width:41.66666667%} .col-md-12{width:100%} .v-separator {   left:50%;   top:10%;   bottom:10%;   border-left:1px solid black; } .row{margin-right:-15px;margin-left:-15px} .row:after,.row:before{display:table;content:" "} .row:after{clear:both} 

i'd recommend using :before , :after on parent div or section create line , or. i've changed .col-md-5 .col-md-6 each takes 50% of parent. way don't need unnecessary html elements, grows height automatically, , it's centered within parent. you'll need adjust divs form fields in them spacing.

edit comment

for small screens, if heights equal, can change :before have width: auto; height: 1px.

if heights aren't equal , because line shows in middle, you'll want use these in media query (@media (min-width: 600px){} or whatever width side side) show when side side. if aren't equal height, can still mimic @ smaller sizes using border-bottom on top div.

.row:after,.row:before{display:table;content:""}  .row:after{clear:both}    .v-separator .col-md-6:first-child {  border-bottom: 1px solid black;  padding-bottom: 15px;  margin-bottom: 15px;  position: relative;  }    .v-separator .col-md-6:first-child:after {  content: 'or';  display: block;  color: black;  width: 30px;  height: 30px;  line-height: 30px;  bottom: -15px;  background: white;  padding: 3px;  position: absolute;  text-align: center;  left: 0;  right: 0;  margin: auto;  box-sizing: border-box;  }    @media (min-width: 600px){  .col-md-2,.col-md-6,.col-md-12   {     float:left;     position:relative;     min-height:1px;     padding-right:15px;     padding-left:15px;     box-sizing: border-box;  }  .col-md-2{width:16.66666667%}  .col-md-6{width:45%;}  .col-md-6 + .col-md-6 {float: right;}  .col-md-12{width:100%}    .v-separator .col-md-6:first-child {      border-bottom: 0;      padding-bottom: 0;      margin-bottom: 0;  }    .v-separator .col-md-6:first-child:after {      display: none;  }    /* added v-separator:before, :after , position: relative below */  .v-separator:before {      content: '';    position: absolute;    display: block;    left:0;    right: 0;    top:10%;    bottom:10%;    margin: auto;    width: 1px;    background: black;  }    .v-separator:after  {      content: 'or';      position: absolute;      display: block;      background: white;      padding: 3px;      left: 0;      right: 0;      top: 0;      bottom: 0;      width: 20px;      height: 20px;      line-height: 20px;      margin: auto;      color: black;      text-align: center;  }    .v-separator {position: relative;}    .row{position: relative;margin-right:-15px;margin-left:-15px}  }

<section class="v-separator">     <div class="row">        <div class="col-md-6">            form fields left<br>            form fields left<br>            form fields left<br>            form fields left<br>            form fields left<br>            form fields left        </div>        <div class="col-md-6">            form fields right<br>            form fields right<br>            form fields right<br>            form fields right<br>            form fields right<br>            form fields right        </div>     </div>  </section>