Css同一行中的两个标题

<style>
    .title1 {
        float: left;
        margin-right: 10px;
    }
    .title2 {
        float: left;
    }
</style>

<div>
    <h1 class="title1">标题1</h1>
    <h1 class="title2">标题2</h1>
</div>

<style>
    .container {
        display: flex;
    }
    .title {
        margin-right: 10px;
    }
</style>

<div class="container">
    <h1 class="title">标题1</h1>
    <h1 class="title">标题2</h1>
</div>