将两个div中的内容并排对齐

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

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

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

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

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

    <div>
        <!-- 右侧内容 -->
    </div>
</div>

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

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

    <div>
        <!-- 右侧内容 -->
    </div>
</div>