Currently, I am working on a Sharepoint Web Part mockup in this fiddle. As shown below, the second form is not yet formatted or aligned properly:
https://i.sstatic.net/8JHHP.png
Additionally, there are issues with the alignment of the second form, which appears a row below where it should actually be positioned.
When using the same CSS and HTML on the Sharepoint Web Part, the display is significantly different:
https://i.sstatic.net/YfWD0.png
My goal is to have the second form aligned to the right of the first form, rather than below it. However, the Sharepoint version seems to not adhere to the widths set for the forms. Why is there such a difference, and what can be done to make the Sharepoint page resemble the jsfiddle version more closely?
Below is the code, identical in both instances:
CSS
.underline {
text-decoration: underline;
}
input[placeholder] {
font-size: 0.6em;
width: 500;
}
// Additional CSS properties...
HTML
<h2 class="underline">UCSC POST TRAVEL EXPENSE</h2>
// HTML markup for form elements...
UPDATE
After adding Sully's CSS and HTML, the appearance of the fiddle has improved. However, applying the same changes to the Sharepoint Web Part does not reflect any enhancements.
Could it be possible that Sharepoint does not allow multiple forms to be displayed on the same row?
UPDATE 2
Regrettably, but unsurprisingly, the display differs between Chrome and IE (the previous non-fiddle screenshot). Here's how it looks in Chrome: