How to arrange all fieldset elements on one line?

Question

I have a form composed of 3 fieldsets, and I want to display all individual elements on the same line, meaning:

< input> To < input > < input> < checkbox> < checkbox> < checkbox> ...

Instead of the way it is now:

So basically, I need to move the contents of the first fieldset into a single line.

Here's my HTML:

<div id="filtersDiv" >
    <fieldset class="reservationFiltersCheckinDates"><legend>{!$Label.check_in}</legend>
    <apex:inputField value="{!reservationSearchCriteria.Check_In__c}"
        id="reservationSearchCheckInStart" onchange="changeValues()"
        styleClass="ajaxableElem" /> {!$Label.to} <apex:inputField value="{!reservationSearchCriteria.Check_Out__c}"
        id="reservationSearchCheckInEnd" onchange="changeValues()"
        styleClass="ajaxableElem" /></fieldset>
    <fieldset class="reservationFiltersSearch"><legend>{!$Label.nameOrReservationId}</legend>

    <input type="text" value="{!reservationSearchText}"
        id="reservationSearchText" onfocus="this.oldvalue = this.value;"
        onkeyup="showAjax(this);changeValues();" />
    <script type="text/javascript">
                        // have to do it here, as this change is lost of partial page refresh, and
                        // we can't add placeholder attribute directly to visualforce tags 
                        j$(document).ready(function() {
                          j$("[id*='reservationSearchText']").attr('placeHolder', 'Search');
                        });                                                      
                    </script></fieldset>
    <fieldset class="reservationFiltersStatus"><legend>{!$Label.status}</legend>
    <label><input type="checkbox" value="{!pendingResCheck1}"
        id="pendResCheckID" onchange="changeValues()" checked="true"
        class="ajaxableElem" />{!$Label.pending}</label> <label><input
        type="checkbox" value="{!checkedInResCheck}" id="checkedInResCheckID"
        onchange="changeValues()" checked="true" class="ajaxableElem" />{!$Label.checkedin}</label>
    <label><input type="checkbox" value="{!cancelledResCheck}"
        id="cancelledResCheckID" onchange="changeValues()" checked="true"
        class="ajaxableElem" />{!$Label.canceled}</label> <label><input
        type="checkbox" value="{!confirmResCheck}" id="confirmResCheckID"
        onchange="changeValues()" checked="true" class="ajaxableElem" />{!$Label.confirmed}</label>
    <label><input type="checkbox" value="{!checkedOutResCheck}"
        id="checkedOutResCheckID" onchange="changeValues()" checked="true"
        class="ajaxableElem" />{!$Label.checkedout}</label></fieldset>
</div>

CSS:

#filtersDiv
{
    margin: 10px 0 5px 0 !important;
}
#filtersDiv fieldset
{
    float: left;
    margin-right: 10px;
    border: none;
}
#filtersDiv fieldset legend
{
    font-size: 14px !important;
}

Answer 1

You could simply set all the child elements of fieldset to be displayed as inline-block:

fieldset > * {
    display:inline-block;
}

JSFiddle example.