Html 如何使w3单元不自动调整？

在一个HTML页面上工作，需要两个元素并排，以复制一个50/50的场景。我使用w3.css来帮助我，因为我不太熟悉HTML/css

我的代码如下所示。因此，当AWords/BWords增长过大时，单元格会增长，使其与另一半不匹配。我想问的是，如何实现规模的统一增长？所以这两个半部互相匹配，中途标记留在屏幕中间？

<div class="Options w3-cell-row w3-center" style="width:75%;margin: 0 auto;">
        <div class="OptionA w3-container w3-cell" style="background-color: #EA4D63;border-style: solid;border-top-left-radius:25px;border-bottom-left-radius: 25px;">
            <div class="w3-container">
                <p class="AWords w3-xxlarge"></p>
            </div>
            <div class="w3-container">
                <p class="AVotes w3-large"></p>
            </div>
        </div>
        <div class="OptionB w3-container w3-cell" style="background-color:#2BA9E5;border-style: solid;border-top-right-radius: 25px;border-bottom-right-radius: 25px;">
            <div class="w3-container">
                <p class="BWords w3-xxlarge"></p>
            </div>
            <div class="w3-container">
                <p class="BVotes w3-large"></p>
            </div>
        </div>
    </div>

---

假设“中间”标记是指垂直分割两个元素的线，这是因为W3使用基于表格的布局。表格会自动展开以包含其内容

因此，为了确保两个元素占用相同的水平空间，只需为单元格指定一个固定的。这可以通过定位

.w3单元格来实现：

.w3-cell {
    width: 200px;
}

从以下几点可以看出：


.w3单元{
宽度：200px；
}

Idk该怎么办

如果这面太大，看起来会很奇怪

假设“中间”标记是指垂直分割两个元素的线，这是因为W3使用基于表格的布局。表格会自动展开以包含其内容

因此，为了确保两个元素占用相同的水平空间，只需为单元格指定一个固定的。这可以通过定位
.w3单元格来实现：

.w3-cell {
    width: 200px;
}

从以下几点可以看出：


.w3单元{
宽度：200px；
}

Idk该怎么办

如果这面太大，看起来会很奇怪

是的，这看起来不错！后续问题：我怎样才能让整个事情变得更广泛？这只是改变w3单元格行宽度的一种情况吗？基本上是的，但必须增加每个单元格的值。理想情况下，您应该为
.w3单元格
使用基于百分比的值，例如
宽度：50%
，并使
.w3单元格行
使用固定宽度。那么你只有一个值需要更新。是的，这看起来不错！后续问题：我怎样才能让整个事情变得更广泛？这只是改变w3单元格行宽度的一种情况吗？基本上是的，但必须增加每个单元格的值。理想情况下，您应该为
.w3单元格
使用基于百分比的值，例如
宽度：50%
，并使
.w3单元格行
使用固定宽度。那么您只有一个要更新的值。