Inline form layout broken - html

Question

I am trying to create an inline form where the label is on top of the input like in a bootstrap form. I have tried various options and although i have menaged to get the label on top of the input, the layout breaks after the first 2 inputs.
I have done a screenshot and would appreciate it someone could check my code and point out my error. many thanks
BTW:
The form-group i am using is not to be confused with the bootstrap
form-group.
.form-group {
display: inline-block;
margin-bottom: 0 !important;
margin-top: 10px !important;
width: 45%;
padding: 5px 5px;
}
.form-area {
background-color: #161616;
padding: 10px 40px 20px;
margin: 10px 0px 50px;
border: 1px solid #111;
}
.form-control {
background: -moz-linear-gradient(90deg, rgba(64, 64, 64, 1) 0%, rgba(33, 33, 33, 1) 100%) repeat scroll 0 0 padding-box !important;
border-radius: 5px;
box-shadow: 0 0 2px #4b4b4b inset, 0 1px 1px rgba(0, 0, 0, 0.3) !important;
color: #fff !important;
font-size: 0.875rem;
line-height: 1.43;
min-height: 2.8em !important;
padding: 0.5em 1.07em;
border: none;
color: #999 !important;
}
#editForm {
display: inline;
}
.labelStyle {
display: block;
color: black;
margin-left: 5px;
font-size: 14px;
}
.svcBorder {
border: 1px solid #2d2d2d;
border-radius: 5px;
padding: 15px;
margin-bottom: 5px;
margin-top: 30px;
}
input[type="text"] {
display: block;
width: 100%;
height: 24px;
border-radius: 5px;
margin-top: 5px;
padding: 4px 8px 0;
font-size: 14px;
color: dimgrey;
-webkit-box-sizing: border-box;
/* For legacy WebKit based browsers */
-moz-box-sizing: border-box;
/* For legacy (Firefox <29) Gecko based browsers */
box-sizing: border-box;
}
<form id="editForm" name="editForm" style="display: none;">
<div id="message">
<div class="text"></div>
</div>
<div class="form-group">
<label class="labelStyle" for="id">id</label>
<input id="id" name="id" readonly type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="service">Service</label>
<input id="service" name="service" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="activity">Activity</label>
<input id="activity" name="activity" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="dept">Department</label>
<input id="dept" name="dept" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="company">Company</label>
<input id="company" name="company" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="user">User</label>
<input id="user" name="user" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="item">Item</label>
<input id="item" name="item" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="date">Date</label>
<input id="date" name="date" type="text" value="">
</div>
</form>

Answer 1

According to your screenshot, this seems to affect the very first field in your form only - so the element preceding it,
<div id="message"><div class="text"></div></div>
likely has something to do with that ...
We didn’t see any styling for that in your code snippet, but if it has margins/paddings/borders or anything like that set, it might still influence the position of the following elements, even if it is currently “empty” (as in, no text content.)