Can't set two h2 elements side by side

Issue

I've got problem in simple math with two <h2> elements side by side in a form. The form width is 400px. <h2> elements are 200px wide including padding but still the same sized <h2> (near it) is going onto a new row.

https://jsfiddle.net/9vbqwcm0/1/

h2{
    display: inline-block;
    padding: 15px;
    cursor: pointer;
    margin: 0;
}

h2:first-child{
    width: 170px;
    text-align: center;
    background: #00c;
}

h2:last-of-type{
    width: 170px;
    text-align: center;
}

<form action="#" method="GET">
        <h2>Sign in</h2>
        <h2>New account</h2>
        <input type="text" name="Meno" placeholder="Meno">
        <input type="email" name="Email" placeholder="E-mail">
        <input type="password" name="Password" placeholder="Heslo">
        <label for="agree">
            <input type="checkbox" name="akceptujem" id="agree"> Agree therms of use
        </label>
        <button>Create ACC</button>
    </form>

Solution

There are many ways. inline-block elements are rendered in line as element tag, so if your HTML tag is not in line, it will render the formatted code and converts the next line into a whitespace.

Besides Radu Marinescu's solution you might also just try this to prevent it:

<h2>Sign in</h2><!--
--><h2>New account</h2>

Or

<h2>Sign in</h2
><h2>New account</h2>

Or negative margin like in CSS example margin-left:-4px

Or wrap the elements with a div container and give it font-size:0

Or you can even skip the closing tag and it will ignore the gap.

<h2>Sign in
<h2>New account

HTML5 doesn't care about closing tags on inline-block elements but I wouldn't recommend this due to parsing reasons e.g JavaScript or some back-end code and SEO purposes.

Or float instead

Or use flexbox

David Walsh prettily explains it incl. solutions at his blog

Answered By - Thielicious