Make moving the left border to the center in javascript

Question

I am making changes to the current divone so that I need a vertical line in the middle of mine div. So, I saw a lot of decisions in which they make the left border, and using the left property, they move it 50% to the left (which is actually in the middle).

This is how i do my div:

if (id == "Metricbar" ) {
      var Parentdiv = document.getElementById("homeContainer");
      var rowDiv = document.createElement("article");
      rowDiv.setAttribute("class", "col-sm-12 col-md-12 col-lg-12");
      rowDiv.style.border = "1px solid #ddd";
      rowDiv.style.marginBottom = "1px";
      rowDiv.style.marginTop = "1px";
      rowDiv.style.borderLeft = "2px solid #ddd";
      Parentdiv.appendChild(rowDiv);


      var ctrlDiv = document.createElement("div");
      ctrlDiv.setAttribute("data-widget-editbutton", "false");
      ctrlDiv.className = "jarviswidget";
      ctrlDiv.setAttribute("data-widget-fullscreenbutton", "false");
      ctrlDiv.id = id;
      var temp = $compile(ctrlDiv)($scope);
      angular.element(rowDiv).append(temp);
      rowDiv.appendChild(ctrlDiv);
} 

My question is how to move it to the center . Is there any way to do this?

I tried:

rowDiv.style.borderLeft.marginLeft = "50%";
rowDiv.style.borderLeft.Left = "50%";
rowDiv.style.borderLeft.leftMargin = "50%";

But none of this helps. Can someone point me in the right direction.

HTML file:

<section id="widget-grid" class="" style="padding-left:13px;padding-right:13px;">
   <div class="row" id="homeContainer"></div>
   <div class="modaldialogs" style="display: none">
      <div class="center">
         <img alt="" src="img/ajax-loader.gif" />
      </div>
   </div>
</section>

But I use this div several times. I am checking here based on id.

I want this black line as shown in the image

Answer 1

article, - CSS!

article position: relative position: absolute. :after psuedo .

HTML Javascript ( ), CSS.

 var Parentdiv = document.getElementById("homeContainer");
 var rowDiv = document.createElement("article");
 rowDiv.setAttribute("class", "col-sm-12 col-md-12 col-lg-12");
 rowDiv.style.marginBottom = "1px";
 rowDiv.style.marginTop = "1px";
 rowDiv.style.borderTop = "2px solid #ddd";
 rowDiv.style.borderRight = "2px solid #ddd";
 rowDiv.style.borderBottom = "2px solid #ddd";
 rowDiv.style.borderLeft = "2px solid #ddd";
 Parentdiv.appendChild(rowDiv);

#homeContainer article {
  height: 300px;           // Just for demo purposes since we have no content
  position: relative;
}

#homeContainer article:after {
  content: "";
  height: 100%;
  width: 0px;
  position: absolute;
  border-right: 3px solid #000000;
  right: 50%;
}

<section id="widget-grid" class="" style="padding-left:13px;padding-right:13px;">
  <div class="row" id="homeContainer"></div>
  <div class="modaldialogs" style="display: none">
    <div class="center">
      <img alt="" src="img/ajax-loader.gif" />
    </div>
  </div>
</section>

Hide result

Answer 2

. div, javascript , .

var element = document.createElement('div');
element.className = "divider";
rowDiv.appendChild(element); \\appending it to parent

CSS

.divider {
  content: "";
  position: absolute;
  z-index:1;
  top: 0;
  bottom: 0;
  left: 45%;
  border-left: 2px solid #C0C0C0;
}