CSS样式 - 如何将这两个div框放在一起

<style>
    .left-div {
        float: left;
        width: 50%;
    }

    .right-div {
        float: right;
        width: 50%;
    }

    .clearfix {
        clear: both;
    }
</style>

<div class="left-div">
    <!-- 左侧div框的内容 -->
</div>

<div class="right-div">
    <!-- 右侧div框的内容 -->
</div>

<div class="clearfix"></div>

<style>
    .flex-container {
        display: flex;
        flex-direction: row;
    }

    .left-div {
        flex: 1;
    }

    .right-div {
        flex: 1;
    }
</style>

<div class="flex-container">
    <div class="left-div">
        <!-- 左侧div框的内容 -->
    </div>

    <div class="right-div">
        <!-- 右侧div框的内容 -->
    </div>
</div>