Is changing default display value a good practice?

tl;dr is it a bad practice to change default display property in my CSS?

Issue

Recently, in our project we had to position 2 header tags so they would look like one. They had the same font size and similar styling so the only issue was how to place one next to another. We had 2 different ideas on that and it le do a discussion on whether or not is a good practice to change default display property

So, our very basic code

<div class="container">
    <h1>Header:</h1>
    <h2>my header</h2>
</div>

The outcome we would like to have:

Header: my header

Note: The code needs to consists of 2 different headings because on mobile version we want to display them in in separate lines (so leaving default display: block).

Approach #1: Use display: inline

This is pretty stright forward. Block elements became inline so they are positioned in the same line. The disadvantage of this approach is that default display properties of both h1 and h2 were changed.

Approach #2: Use float

H1 can be positioned on the left using float: left property. This approach leaves the default display property intact, but will requires some hacks if the .container is not long enough to fit both headers in single line.

The question

It all leads to a simple question: Is it a bad practice to change the default display property of HTML elements? Is it breaking the standard and should be avoided if possible? Or is it our bread and butter and it does not really matter, as long as code is semantically correct (so headers are placed in h1, articles are placed in article etc...)