Separating 2 div equally - html

Question

Image 1
I want to get rid of the padding-left of DIV 1 and padding-right of DIV 2 in order to separate the 2 divs in the middle equall. I want to . Please take note that I am not using Bootstrap. (Please See Image 1)
Here is my HTML code:
<div class="row">
<div class="col-50">
<div class="card-box">
<h4 class="header-title">View Data</h4>
<div class="col-100">
<div class="row">
<div class="col-50">
<div class="btn-group">
<a class="btn-excel" href="#"><span>Excel</span></a>
<a class="btn-pdf" href="#"><span>PDF</span></a>
</div>
</div>
<div class="col-50">
<form class="pull-right">
<input type="text" placeholder="Search..." class="form-control">
<span><i class="fa fa-search"></i></span>
</form>
</div>
</div>
<div class="row">
<div class="col-100">
</div>
</div>
</div>
</div>
</div>
<div class="col-50">
<div class="card-box">
<h4 class="header-title">View Data</h4>
<div class="table-container">
<div class="row">
<div class="col-50">
<div class="btn-group">
<a class="btn-excel" href="#"><span>Excel</span></a>
<a class="btn-pdf" href="#"><span>PDF</span></a>
</div>
</div>
<div class="col-50">
<form class="pull-right">
<input type="text" placeholder="Search..." class="form-control">
<span><i class="fa fa-search"></i></span>
</form>
</div>
</div>
<div class="row">
<div class="col-100">
</div>
</div>
</div>
</div>
</div>
</div>
And here is my CSS Code:
*, *::before, *::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row::after {
content: "";
display: table;
clear: both;
}
.row {
margin-left: -0.75rem !important;
margin-right: -0.75rem !important;
}
.col-50 {
width: 50%;
float: left;
position: relative;
min-height: 1px;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.card-box {
padding: 5px 20px 20px 20px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-clip: padding-box;
margin-top: 15px;
margin-bottom: 20px;
background-color: #ffffff;
box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
display: block;
min-height: 0.01%;
overflow-x: auto;
}

Answer 1

Use first-of-type and last-of-type selectors to select the first and last columns and then, remove the left padding of the first column and right padding of the last column like this:
.col-50:first-of-type {
padding-left: 0rem;
}
.col-50:last-of-type {
padding-right: 0rem;
}
The class .col-50 already has padding-left: 0.75rem; and padding-right: 0.75rem; which will add equal spacing between the columns, so no need to edit this.
.col-50 {
width: 50%;
float: left;
position: relative;
min-height: 1px;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
Here's the working codepen example: http://codepen.io/anon/pen/evxyNb