How to position div like left or right border of element

Question

I want to position a div between two elements and match their height.

I'd allow a user to click on this div and hide left or right an element.

The problem is that I don't see my div being rendered.

Next snippets will show what I am trying to do.

This is my styles

html, body {margin:0;padding:0;height:100%;}
.cssrow {
    width: 100%; 
    min-height:200px;
    display: table;
    border-collapse: collapse;
    border: solid 1px grey;
    border-bottom: 1px solid grey;
    margin: 0;
    padding: 0;
}
.csscolumn {
    border: solid 1px grey;
    margin: 0;
    padding:0;
    display: table-cell;
}

.layoutleft{
  max-width: 300px;  
  min-width: 300px;
   min-height:200px;
}

.layoutrigth{
  max-width: 300px; 
  min-width: 300px;
   min-height:200px;

}
.layoutcenter{
  width: 100%;
  min-width:500px;
  max-height: 700px;
  min-height:200px;
}

html

<div class='cssrow'>
  <div class='csscolumn layoutleft'></div>
  <div class='csscolumn'>
    <div style="height: 100%;width: 10px;background-color: #aaaaaa"></div>                                                     
</div>
<div class='csscolumn layoutcenter'>
</div>
<div class='csscolumn layoutrigth'>
</div>
</div>