Vertical line between two div limited height

Question

I am trying vertical line between two divs. But I don't want it to have the same height as the divs. I need let's say 10% cut from top and 10% cut from bottom.

.container {
  display: table;
  border: 1px solid blue;
}
.line {
  padding-right: 20px;
  border-right: 1px solid #cfc7c0;
}
.first {
  display: table-cell;
  width: 30%;
}
.second {
  display: table-cell;
  width: 30%;
  padding-left: 10px;
}

<div class="container">
  <div class="first line">this is first div and some text</div>
  <div class="second">
    Right
    <br/>and more
    <br/>Side
  </div>
</div>

http://jsfiddle.net/VKqEU/124/

Kindly suggest how to achieve this?

Answer 1

You can try using an ::after pseudo element.

.line {
    position: relative;
}
.line:after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 1px solid #cfc7c0;
    top: 10%;
    bottom: 10%;
}

.container {
    display: table;
    border: 1px solid blue;
}
.line {
    padding-right: 21px; /* 20+1 */
    position: relative;
}
.line:after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 1px solid #cfc7c0;
    top: 10%;
    bottom: 10%;
}
.first {
    display: table-cell;
    width: 30%;
}
.second {
    display: table-cell;
    width: 30%;
    padding-left: 10px;
}

<div class="container">
    <div class="first line">this is first div and some text</div>
    <div class="second">
        Right
        <br/>and more
        <br/>Side
    </div>
</div>