Grouping form elements together - css

Question

I'm trying to create two css container classes that can be used to:
Vertically align form elements using .group.
Horizontally align form elements using .group.group--inline.
Each for element will use the class .group__item to make sure there's 16px vertical and horizontal distance between the form elements. For example:
.group__item { margin-top: 16px; }
I however want to sure that the entire height and width of the .group can be used for the form elements and that there is no unwanted whitespace. Not having any margin around our components makes it easier to properly layout them.
To negate the margin on the .group__item's I'm adding it as negative margin to the .group and .group--inline. For example:
.group { margin-top: -16px; }
I'm wondering if there are any negative side effects to giving the .group container a negative margin?
function toggleGroupBorder() {
var groups = document.querySelectorAll('.group');
for (var i = 0, j = groups.length; i < j; i++) {
groups[i].classList.toggle('group--show-border');
}
}
.container {
margin: 32px;
padding: 32px;
border: 1px solid #99f;
}
.group {
margin-top: -16px;
}
.group.group--show-border {
border: 1px solid #f99;
}
.group .group__item {
display: block;
margin-top: 16px;
}
.group.group--inline {
margin-left: -16px;
}
.group.group--inline .group__item {
margin-left: 16px;
display: inline-block;
}
* {
box-sizing: border-box;
}
body {
font-family: Helvetica, Arial;
margin: 0;
}
input {
height: 32px;
padding: 0 8px;
}
button {
height: 32px;
padding: 0 24px;
border: none;
}
<button onclick="toggleGroupBorder();">Toggle Group Border</button>
<h2>Vertical field alignment using <code>.group</code></h2>
<div class="container">
<div class="group">
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
</div>
</div>
<h2>Horizontal field alignment using <code>.group.group-inline</code></h2>
<div class="container">
<div class="group group--inline">
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
</div>
</div>
Or see this CodePen