Html/css在同一行显示两个div不起作用

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

<div class="left-div">
    <!-- 左侧内容 -->
</div>
<div class="right-div">
    <!-- 右侧内容 -->
</div>

<style>
    .flex-container {
        display: flex;
    }
    .flex-item {
        flex: 1;
    }
</style>

<div class="flex-container">
    <div class="flex-item">
        <!-- 左侧内容 -->
    </div>
    <div class="flex-item">
        <!-- 右侧内容 -->
    </div>
</div>

<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
</style>

<div class="grid-container">
    <div>
        <!-- 左侧内容 -->
    </div>
    <div>
        <!-- 右侧内容 -->
    </div>
</div>