Why are my HTML forms appearing differently in Sharepoint and jsfiddle? - html

Question

I'm mocking up a Sharepoint Web Part in this fiddle and it currently looks like this (the second form has yet to be formatted/aligned, as you can see):
(even this, in addition to the ugly formatting on the second form, is not perfect, as the second form aligns a "row" below where I'd like it to be).
I'm using the exact same CSS and HTML on a Sharepoint Web Part, and it is considerably different:
I want the second form to the right, not below, the first form. The Sharepoint representation does not seem to restrict the form widths to allow this, though. Why the difference, and how can I make the Sharepoint Web Page more closely mimic the jsfiddle version?
Here is the code (again, exactly the same in both places):
CSS
.underline {
text-decoration: underline;
}
input[placeholder] {
font-size: 0.6em;
width: 500;
}
.firstblocklabel {
width: 160px;
display: inline-block;
margin: 2px;
}
.firstblockdatelabel {
width: 108px;
display: inline-block;
}
.firstblockinput {
width: 224px;
}
.dateinput {
width: 124px;
margin: 2px;
}
.timeinput {
width: 100px;
}
form {
display: inline-block;
vertical-align:top;
//float: left;
}
.borderedform {
border: 1px solid;
margin: 1em;
padding: 1em;
}
.reditalics {
color: red;
font-style: italic;
}
.wrappedlabel { width: 320px; display: block; }
HTML
<h2 class="underline">UCSC POST TRAVEL EXPENSE</h2>
<label>Form Filled Out:</label>
<input type="date" style="width=100px"></input>
<label>Access the Post Travel Guide for reimbursement validation</label>
<br/>
<br/>
<form>
<label class="firstblocklabel">Traveler's name:</label>
<input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />
<br/>
<label class="firstblocklabel">Traveler's E-mail:</label>
<input class="firstblockinput" type="email" id="traveleremail" />
<br/>
<label class="firstblocklabel">Traveler's Phone:</label>
<input class="firstblockinput" type="tel" id="travelerphone" />
<br/>
<label class="firstblocklabel">Traveler's Mail Stop:</label>
<input class="firstblockinput" type="text" id="travelermailstop" />
<br/>
<label class="firstblocklabel" id="travelerstreetorpoboxlabel">Traveler's Street or P.O.:</label>
<input class="firstblockinput" type="text" id="travelerstreetorpobox" />
<br/>
<label class="firstblocklabel">Traveler's Destinations:</label>
<input class="firstblockinput" type="text" id="travelersdestinations" />
<br/>
<label class="firstblocklabel">UC Business Purpose:</label>
<input class="firstblockinput" type="text" id="ucbusinesspurpose" />
<br/>
<label class="firstblockdatelabel">Departure Date:</label>
<input class="dateinput" type="date" id="travelersdeparturedate" />
<label>Time:</label>
<input class="timeinput" type="time" id="travelersdeparturetime" />
<br/>
<label class="firstblockdatelabel">Return Date:</label>
<input class="dateinput" type="date" id="travelersreturndate" />
<label>Time:</label>
<input class="timeinput" type="time" id="travelersreturntime" />
</form>
<form class="borderedform">
<label>Trip Number:</label>
<input type="text" id="tripnumber" title="If Applicable" />
<br/>
<label>Form prepared by:</label>
<input type="text" id="formpreparedby" />
<hr/>
<label>Dept / Division</label>
<input type="text" id="deptdivision" />
<br/>
<label>Email:</label>
<input type="email" id="email" />
<label>Ext:</label>
<input type="text" id="extension" />
<hr/>
<label class="reditalics">Required:</label>
<label>US Citizen - YES</label>
<input type="radio" id="uscitizenyes" value="YES" />
<label>NO</label>
<input type="radio" id="uscitizenno" value="NO" />
<br/>
<input type="radio" id="visitor" />Visitor
<label>Foreign Visa Type:</label>
<select title="Please select a visa type">
<option value="pleaseselect">Please Select</option>
. . .
</select>
<br/>
<input type="radio" id="ucstudent" />UC Student
<br/>
<input type="radio" id="ucemployee" />UC Employee
<label>UC Campus:</label>
<select title="Please select a campus">
<option value="pleaseselect">Please Select</option>
. . .
</select>
<br/>
<label class="wrappedlabel"><span style="color:red">Note: </span>If traveler chooses to include personal travel, record times/dates based only on the business portion of the trip. Provide explanation of personal travel.</label>
</form>
UPDATE
Adding Sully's CSS and HTML, the jsfiddle looks better, but the same additions to the Sharepoint Web Part don't change it at all there.
Maybe Sharepoint disallows multiple forms to be on the same "row"?
UPDATE 2
Unfortunately but not surprisingly, it looks different in Chrome (the other non-fiddle scream shot was IE):

Answer 1

Try making your forms float:left.
Bonus: for borderedform, use margin-left instead of just margin in order to remove that vertical space at the top.
CSS
.firstform { float: left; }
.borderedform {
float: left;
border: 1px solid;
margin-left: 1em;
padding: 1em;
}
To use that CSS, add class="firstform" to the first form.
http://jsfiddle.net/z8y6L303/