如何将按钮和文本放在同一行？

<span>文本内容</span>
<button>按钮</button>

<style>
    .text {
        float: left;
    }
    .button {
        float: left;
    }
</style>
<div class="text">文本内容</div>
<div class="button">按钮</div>

<style>
    .container {
        display: flex;
        flex-direction: row;
    }
</style>
<div class="container">
    <span>文本内容</span>
    <button>按钮</button>
</div>