如何使用css在html页面中对齐同一行的两个表单域？

<style>
    .form-field {
        float: left;
        margin-right: 10px; /* 可选，用于设置两个表单域之间的间距 */
    }
</style>

<div class="form-field">
    <label for="field1">Field 1:</label>
    <input type="text" id="field1">
</div>

<div class="form-field">
    <label for="field2">Field 2:</label>
    <input type="text" id="field2">
</div>

<style>
    .form-container {
        display: flex;
        justify-content: space-between;
    }
</style>

<div class="form-container">
    <div class="form-field">
        <label for="field1">Field 1:</label>
        <input type="text" id="field1">
    </div>

    <div class="form-field">
        <label for="field2">Field 2:</label>
        <input type="text" id="field2">
    </div>
</div>