Setting display: inline for 2 divs doesn't work

Question

I trying to make a div display beside another div using "display: inline". However, I can't seem to make it work. I have a parent div (parent-and-guardian) with 2 divs inside (student-parent-container and student-guardian-other-container). I am trying for this 2 divs to be displayed side by side.

<div id="parent-and-guardian" class="tab">
    <div id="student-parent-container">
        <fieldset id="student-father-info">
            <legend class="form-legend">Father Information</legend>
            <div>
                <label class="form-label">Name:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
            <div>
                <label class="form-label">Contact No.:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
        </fieldset>
        <fieldset id="student-mother-info">
            <legend class="form-legend">Mother Information</legend>
            <div>
                <label class="form-label">Name:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
            <div>
                <label class="form-label">Contact No.:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
        </fieldset>
    </div>
    <div id="student-guardian-other-container">
        <fieldset id="student-guardian-info">
            <legend class="form-legend">Guardian Information</legend>
            <div>
                <label class="form-label">Name:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
            <div>
                <label class="form-label">Relation:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
        </fieldset>
    </div>
</div>

Here is the CSS:

#student-parent-container {
    display: inline;
}

#student-guardian-other-container {
    display: inline;
}

I'd like for the Guardian Information to be on the right side of Father Information and Mother Information.

Here's a link to jsFiddle: Test

Answer 1

For native-block elements it's better to apply display: inline-block; than element will still take block element display effect (like setting height for inline elements does nothing, while block elements height does change). Also your blocks may lead to different top position on page. That's why I added vertical-align: top (for inline and inline-block elements only):

 #student-parent-container { display: inline-block; vertical-align: top; } #student-guardian-other-container { display: inline-block; vertical-align: top; } 

 <div id="parent-and-guardian" class="tab"> <div id="student-parent-container"> <fieldset id="student-father-info"> <legend class="form-legend">Father Information</legend> <div> <label class="form-label">Name:</label> <input type="text" class="form-input form-input-long"></input> </div> <div> <label class="form-label">Contact No.:</label> <input type="text" class="form-input form-input-long"></input> </div> </fieldset> <fieldset id="student-mother-info"> <legend class="form-legend">Mother Information</legend> <div> <label class="form-label">Name:</label> <input type="text" class="form-input form-input-long"></input> </div> <div> <label class="form-label">Contact No.:</label> <input type="text" class="form-input form-input-long"></input> </div> </fieldset> </div> <div id="student-guardian-other-container"> <fieldset id="student-guardian-info"> <legend class="form-legend">Guardian Information</legend> <div> <label class="form-label">Name:</label> <input type="text" class="form-input form-input-long"></input> </div> <div> <label class="form-label">Relation:</label> <input type="text" class="form-input form-input-long"></input> </div> </fieldset> </div> </div> 

Answer 2

#parent-and-guardian {
    display: flex;
}

it will cause it to display side by side. Check out https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties