Placing two columns beside each other in a partial view - html

Question

I am working on a partial in MVC that contains a form in tow columns. However, one of the forms sits below the other. Here is my code.
<div class="row">
<div id="partialColumn1" class= "col-md-12">
<div class="field padding-left-40">
<label>First Name:</label>
<input id="add_Client_firstName-1" name="add_Client_firstName-1" type="text" value="[First Name goes here ]">
</div>
<div class="field padding-left-40">
<label>Last Name:</label>
<input id="add_Client_lastName-1" name="add_Client_LastName-1" type="text" value="[Last Name goes here ]">
</div>
<div id="partialColumn2" class="col-md-12">
<div class="field padding-left-40">
<label>Referral Date:</label>
<input id="add_Client_referralDate-1" name="add_Client_referralDate-1" type="Date" />
</div>
</div>
</div>
</div>
</div>
And the CSS for my two columns.
#partialColumn1{
float: left;
display: inline-block;
}
#partialColumn2{
display: inline-block;
float: right;
}
I am relatively new to this, it's my first project, so any advice is welcome.

Answer 1

#partialColunm2 is nested in #partialColumn1 ;) Try putting #partialColumn2 outside of #partialColumn1 :D
At least it worked for me.
DEMO: https://codepen.io/Chesswithsean/pen/gWZGGL

Answer 2

Put your cols into 6 each one and remove your css, cols already has inline.
<div class='row'>
<div id="partialColumn1" class= "col-md-6">
<div class="field padding-left-40">
<label>First Name:</label>
<input id="add_Client_firstName-1" name="add_Client_firstName-1" type="text" value="[First Name goes here ]">
</div>
<div class="field padding-left-40">
<label>Last Name:</label>
<input id="add_Client_lastName-1" name="add_Client_LastName-1" type="text" value="[Last Name goes here ]">
</div>
</div>
<div id="partialColumn2" class="col-md-6">
<div class="field padding-left-40">
<label>Referral Date:</label>
<input id="add_Client_referralDate-1" name="add_Client_referralDate-1" type="Date" />
</div>
</div>
</div>